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

回答編集履歴

3

調整

2018/07/20 11:07

投稿

yambejp
yambejp

スコア117902

answer CHANGED
@@ -36,4 +36,37 @@
36
36
  </ul>
37
37
  </div>
38
38
  </div>
39
+ ```
40
+
41
+ # 調整版
42
+ ```javascript
43
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
44
+ <script>
45
+ $(function(){
46
+ $('input[name=xxx]').on('change',function(){
47
+ $('#yyy').toggle($(this).val()=="A");
48
+ }).filter(":checked").trigger('change');
49
+ });
50
+ </script>
51
+
52
+ <div style="display:block">
53
+ <div><p>条件</p></div>
54
+ <div>
55
+ <ul>
56
+ <li><label><input type="radio" name="xxx" value="A" checked>A</label></li>
57
+ <li><label><input type="radio" name="xxx" value="B">B</label></li>
58
+ </li>
59
+ </ul>
60
+ </div>
61
+ </div>
62
+ <div id="yyy" style="display:block">
63
+ <div><p>表示非表示させたい</p></div>
64
+ <div>
65
+ <ul>
66
+ <li><label><input type="radio" name="zzz" value="C">C</label></li>
67
+ <li><label><input type="radio" name="zzz" value="D">D</label></li>
68
+ </li>
69
+ </ul>
70
+ </div>
71
+ </div>
39
72
  ```

2

HTML

2018/07/20 11:07

投稿

yambejp
yambejp

スコア117902

answer CHANGED
@@ -12,4 +12,28 @@
12
12
  $(function(){
13
13
  $('#yyy').toggle($("input[name='xxx']:checked").val()!="");
14
14
  });
15
+ ```
16
+
17
+ # 追記
18
+ ```HTML
19
+ <div style="display:block">
20
+ <div><p>条件</p></div>
21
+ <div>
22
+ <ul>
23
+ <li><label><input type="radio" name="xxx" value="A">A</label></li>
24
+ <li><label><input type="radio" name="xxx" value="B">B</label></li>
25
+ </li>
26
+ </ul>
27
+ </div>
28
+ </div>
29
+ <div id="yyy" style="display:block">
30
+ <div><p>表示非表示させたい</p></div>
31
+ <div>
32
+ <ul>
33
+ <li><label><input type="radio" name="zzz" value="C">C</label></li>
34
+ <li><label><input type="radio" name="zzz" value="D">D</label></li>
35
+ </li>
36
+ </ul>
37
+ </div>
38
+ </div>
15
39
  ```

1

調整

2018/07/20 10:45

投稿

yambejp
yambejp

スコア117902

answer CHANGED
@@ -3,4 +3,13 @@
3
3
  jQueryを利用していますか?
4
4
  なんか普通のjavascriptと混じっててどちらかに統一したほうがよいかと。
5
5
  document.querySelector("input[name='xxx']:checked").value
6
- とか
6
+ とか
7
+
8
+ なおjQueryを前提にするなら
9
+ xxxのチェックボックスでチェックされている状態のもののvalueが""なら
10
+ yyyを隠すというロジックでよいならこう
11
+ ```javascript
12
+ $(function(){
13
+ $('#yyy').toggle($("input[name='xxx']:checked").val()!="");
14
+ });
15
+ ```