【JavaScript】if関数について

Question

###８つのチェックボックスに選択した数によって変わる結果をアコーディオンで見せたい。
JSでIFを使ってチェックの数によって結果が変わる文を書いています。
詳しく書くとチェックボックスが８つあり、0〜3個の場合はA 4〜7個の場合はB 8個全ての場合はCというものにしたいです。チェックボタン群があり、最後に結果を見るボタンを押すことによって、A,B,Cどれかの結果が見えるという感じです。

###該当しない結果の答えまでが表示されてしまう

display:none;が効いてない

###該当のソースコード
```JS

 $(function(){
 	$(".diag_btn").click(function () {
 		 var num = $('.check_btn img.on').length;
 		 if(num == 0 || num == 3) {
 			 $('.anc00_03').css('display','block');
 			 $('.anc04_07').css('display','none');
 			 $('.anc08').css('display','none');
 		 }else if (num == 4 || num == 7){
 			 $('.anc00_03').css('display','none');
 			 $('.anc04_07').css('display','block');
 			 $('.anc08').css('display','none');
 		}else if (num >= 8){
 			 $('.anc00_03').css('display','none');
 			 $('.anc04_07').css('display','none');
 			 $('.anc08').css('display','block');
 				}
 		});
  });

###試したこと
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Comments

[退会済みユーザー]

現在の状態を再現できるミニマムコードを提示してください。

[kei344]

「JS」を「```JavaScript」に置き換えればコードブロックが正しく表示されると思います。

Answer 1

'.check_btn img.on'

というのはcheck_btnクラスのついた何かにチェックだとonクラスが着いたimgが付加されるのでしょうか？
そのあたりを省略して書かれてもチェック状態を切り分けるロジックは厳しいですね

範囲の指定は最初に最小値をチェックしてその後各上限値を順にチェックすればいいでしょう

if(num >= 0){
  if(num <= 3) {
   //0~3の処理  
  }else if(num<=7){
   //4~7の処理  
  }else{
   //8以上の処理  
  }
}else{
  //必要なら0以下の処理
} 

追記

ダミーでチェックボックスを使った例をあげますが、cssのdisplayをいじるなら
show()とhide()の方が一般的で、条件で表示を切り替えるならtoggleで十分です。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('input[type=checkbox].check_btn').on('change',function(){
    var num=$('input[type=checkbox].check_btn:checked').length;
    $('.anc00_03').toggle(num>=0 && num<=3);
    $('.anc04_07').toggle(num>=4 && num<=7);
    $('.anc08').toggle(num>=8);
  });
});
</script>
<input type="checkbox" class="check_btn">
<input type="checkbox" class="check_btn">
<input type="checkbox" class="check_btn">
<input type="checkbox" class="check_btn">
<input type="checkbox" class="check_btn">
<input type="checkbox" class="check_btn">
<input type="checkbox" class="check_btn">
<input type="checkbox" class="check_btn">
<input type="checkbox" class="check_btn">
<input type="checkbox" class="check_btn">
<div class="anc00_03">anc00_03</div>
<div class="anc04_07" style="display:none">anc04_07</div>
<div class="anc08" style="display:none">anc08</div>

Comments

[Shi_hope]

>>というのはcheck_btnクラスのついた何かにチェックだとonクラスが着いたimgが付加されるので>>>しょうか？
>>そのあたりを省略して書かれてもチェック状態を切り分けるロジックは厳しいですね

はいonクラスのimgが付加されます。

サンプルコードありがとうございます。
こちらご参考にさせていだだきます。

[yambejp]

今回のケースならifで分ける必要もないですのでサンプル追記しておきました

Answer 2

if文の条件が(num == 0 || num == 3)ではnumが0または3のとき となります。※1,2は該当しない。
以下のように範囲を条件としましょう

if (num <= 3) {  // num が0,1,2,3の時
    ・・・略・・・
} elseif (num <= 7) { // num が4,5,6,7の時
    ・・・略・・・
} else { // 上記以外のとき
    ・・・略・・・
}

if関数 では無く if文ですね

Comments

[Shi_hope]

素早いご返答、ご指摘ありがとうございます。
上記とても参考になりました、検証させていただきます。
IF関数。。も訂正しておきます、ありがとうございます。

Answer 3

私も基本的には if else で書くと思いますが、
場合によっては switch を使う書き方も分かりやすい場合があります。

例えば、num が 1,3,5 の場合と、2,4,6,7 の場合で
表示を分けたい場合などは有用です。

$(function(){ 
    $(".diag_btn").click(function () { 
        var num = $('.check_btn img.on').length; 
        $('.anc00_03').css('display','none'); 
        $('.anc04_07').css('display','none'); 
        $('.anc08').css('display','none');

        switch (num) {
            default:  // default はどこに入れてもいいです。
            case 0:
            case 1:
            case 2:
            case 3:
                $('.anc00_03').css('display','block'); 
                break;
            case 4:
            case 5:
            case 6:
            case 7:
                $('.anc04_07').css('display','block');
                break;
            case 8:
                $('.anc08').css('display','block');
                break;
        }
    });
});

Comments

[Shi_hope]

ご返信ありがとうございます。
switch文はまだ使ったことがなかったのでこちらとても参考になりました。
サンプルありがとうございます。