teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

調整

2016/12/14 09:07

投稿

yambejp
yambejp

スコア117923

answer CHANGED
@@ -25,8 +25,8 @@
25
25
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
26
26
  <script>
27
27
  $(function(){
28
- $('input[type=checkbox]').on('change',function(){
28
+ $('input[type=checkbox].check_btn').on('change',function(){
29
- var num=$('input[type=checkbox]:checked').length;
29
+ var num=$('input[type=checkbox].check_btn:checked').length;
30
30
  $('.anc00_03').toggle(num>=0 && num<=3);
31
31
  $('.anc04_07').toggle(num>=4 && num<=7);
32
32
  $('.anc08').toggle(num>=8);

1

追記

2016/12/14 09:07

投稿

yambejp
yambejp

スコア117923

answer CHANGED
@@ -16,4 +16,34 @@
16
16
  }else{
17
17
  //必要なら0以下の処理
18
18
  }
19
+ ```
20
+
21
+ # 追記
22
+ ダミーでチェックボックスを使った例をあげますが、cssのdisplayをいじるなら
23
+ show()とhide()の方が一般的で、条件で表示を切り替えるならtoggleで十分です。
24
+ ```HTML
25
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
26
+ <script>
27
+ $(function(){
28
+ $('input[type=checkbox]').on('change',function(){
29
+ var num=$('input[type=checkbox]:checked').length;
30
+ $('.anc00_03').toggle(num>=0 && num<=3);
31
+ $('.anc04_07').toggle(num>=4 && num<=7);
32
+ $('.anc08').toggle(num>=8);
33
+ });
34
+ });
35
+ </script>
36
+ <input type="checkbox" class="check_btn">
37
+ <input type="checkbox" class="check_btn">
38
+ <input type="checkbox" class="check_btn">
39
+ <input type="checkbox" class="check_btn">
40
+ <input type="checkbox" class="check_btn">
41
+ <input type="checkbox" class="check_btn">
42
+ <input type="checkbox" class="check_btn">
43
+ <input type="checkbox" class="check_btn">
44
+ <input type="checkbox" class="check_btn">
45
+ <input type="checkbox" class="check_btn">
46
+ <div class="anc00_03">anc00_03</div>
47
+ <div class="anc04_07" style="display:none">anc04_07</div>
48
+ <div class="anc08" style="display:none">anc08</div>
19
49
  ```