続・チェックボックスで分岐

2023年3月25日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は、複数のチェックボックスによる条件分岐に挑戦してみようと思います。

A and B

参考：teratail｜複雑なチェックボックスの条件分岐

「チェックされた要素を全て持つものだけを表示して、そうでない場合は薄くする」という感じで作ってみます。

まずはチェックボックスを3つ（Red、Yellow、Green）用意します。

クラスをchecks、nameをchk_color、valueはそれぞれred、yellow、greenとしておきます。

<input type="checkbox" class="checks" name="chk_color" value="red">Red

<input type="checkbox" class="checks" name="chk_color" value="yellow">Yellow

<input type="checkbox" class="checks" name="chk_color" value="green">Green

( ´ー`)｡oO(筆者はこのチェックボックスが気に入ったんだろうなあ)

次に、フルーツの一覧を作ります。

divで囲ってクラス名をfruitsとします。

<div class="fruits">
  <p>リンゴ</p>
  <p>ミカン</p>
  <p>メロン</p>
  <p>キウイ</p>
  <p>イチゴ</p>
  <p>バナナ</p>
  <p>ブドウ</p>
</div>

リンゴはred、yellow、greenを全て持つ
ミカンはredとyellowを持つ
イチゴはredのみを持つ

といった感じで、それぞれのフルーツにクラスを付与します。

<div class="fruits">
  <p class="red yellow green">リンゴ</p>
  <p class="red yellow">ミカン</p>
  <p class="red green">メロン</p>
  <p class="yellow green">キウイ</p>
  <p class="red">イチゴ</p>
  <p class="yellow">バナナ</p>
  <p class="green">ブドウ</p>
</div>

赤いミカン？ブラッドオレンジです

赤いメロン？夕張メロンですいやスイカだろ

緑のブドウ？シャインマスカットです

脳内補完よろしくです。

以下のスクリプトを記述します。

(function($){
  var fluits_list = $(".fluits p");

  $('.checks').change(function(){
    var color = $('.checks:checked').map(function() {
      return $(this).val();
    });

    if(color.length == 0){
      fluits_list.css('opacity', '0.1');
	}else{
      for(i=0;i<fluits_list.length;i++){
        hasCount = 0;
		
        for(colori=0;colori<color.length;colori++){
          if($(fluits_list[i]).hasClass(color[colori])){
            hasCount++;
          }
        }
            
        if(hasCount==color.length){
          $(fluits_list[i]).css('opacity', '1');
        }else{
          $(fluits_list[i]).css('opacity', '0.1');
        }
      }
    }
  });
})(jQuery);

A or B

「チェックされた要素をどれか1つでも持つ場合は表示する」場合は、さっきのスクリプトの最後の方を少し書き替えます。

(function($){
  var fluits_list = $(".fluits p");

  $('.checks').change(function(){
    var color = $('.checks:checked').map(function() {
      return $(this).val();
    });

    if(color.length == 0){
      fluits_list.css('opacity', '0.1');
	}else{
      for(i=0;i<fluits_list.length;i++){
        hasCount = 0;
		
        for(colori=0;colori<color.length;colori++){
          if($(fluits_list[i]).hasClass(color[colori])){
            hasCount++;
          }
        }
            
        if(hasCount>0){
          $(fluits_list[i]).css('opacity', '1');
        }else{
          $(fluits_list[i]).css('opacity', '0.1');
        }
      }
    }
  });
})(jQuery);

まとめ

forとかi++とか、難しい。

これを応用して薬の記事を書こうと思います！