回答編集履歴
2
調整
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
追記
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
|
```
|