JavaScript内でwindow.onload = function() {}で初期表示時に他の値によって表示非表示にしたいです。

JavaScript
1window.onload = function() {
2  if ($("input[name='xxx']:checked").val() == "") {
3    document.getElementById('yyy').style.display = "none";
4  } else {
5    document.getElementById('yyy').style.display = "block";
6  }
7}

のように実装で、
Chromeだと期待した通りに表示非表示の制御が出来ています。
IEだとなぜかxxx.val()がundefinedになり期待通りにはいきません。

調べたところIEの仕様だという情報もありましたが、
IEでも動くような修正方法が見つかっていません。

ご教授頂けると幸いです。

一部抜粋(抜粋しすぎていれば教えてください。)

HTML
1<div style="display:block">
2  <div><p>条件</p></div>
3  <div>
4    <ul>
5      <li>
6        <input id="xxx" type="radio" name="A" />
7        <input id="xxx" type="radio" name="B" />
8      </li>
9    </ul>
10  </div>
11</div>
12<div id="yyy" style="display:block">
13  <div><p>表示非表示させたい</p></div>
14  <div>
15    <ul>
16      <li>
17        <input type="radio" name="C" />
18        <input type="radio" name="D" />
19      </li>
20    </ul>
21  </div>
22</div>

kei344

2018/07/20 09:38

xxx、styleの定義部分も提示してください。

kchan

2018/07/20 09:42

修正しました。xxxやyyy、if文内の右辺は適当に読み替えて頂ければと思います。

x_x

2018/07/25 09:00

再現しません(提示されたHTMLに name="xxx" がないので補って確認してもIEで再現しない)。どのようなことをしたいのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

$("input[name='xxx']:checked")

jQueryを利用していますか？
なんか普通のjavascriptと混じっててどちらかに統一したほうがよいかと。
document.querySelector("input[name='xxx']:checked").value
とか

なおjQueryを前提にするなら
xxxのチェックボックスでチェックされている状態のもののvalueが""なら
yyyを隠すというロジックでよいならこう

javascript
1$(function(){
2  $('#yyy').toggle($("input[name='xxx']:checked").val()!="");
3});

追記

HTML
1<div style="display:block">
2  <div><p>条件</p></div>
3  <div>
4    <ul>
5      <li><label><input type="radio" name="xxx" value="A">A</label></li>
6      <li><label><input type="radio" name="xxx" value="B">B</label></li>
7      </li>
8    </ul>
9  </div>
10</div>
11<div id="yyy" style="display:block">
12  <div><p>表示非表示させたい</p></div>
13  <div>
14    <ul>
15      <li><label><input type="radio" name="zzz" value="C">C</label></li>
16      <li><label><input type="radio" name="zzz" value="D">D</label></li>
17      </li>
18    </ul>
19  </div>
20</div>

調整版

javascript
1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3$(function(){
4  $('input[name=xxx]').on('change',function(){
5    $('#yyy').toggle($(this).val()=="A");
6  }).filter(":checked").trigger('change');
7});
8</script>
9
10<div style="display:block">
11  <div><p>条件</p></div>
12  <div>
13    <ul>
14      <li><label><input type="radio" name="xxx" value="A" checked>A</label></li>
15      <li><label><input type="radio" name="xxx" value="B">B</label></li>
16      </li>
17    </ul>
18  </div>
19</div>
20<div id="yyy" style="display:block">
21  <div><p>表示非表示させたい</p></div>
22  <div>
23    <ul>
24      <li><label><input type="radio" name="zzz" value="C">C</label></li>
25      <li><label><input type="radio" name="zzz" value="D">D</label></li>
26      </li>
27    </ul>
28  </div>
29</div>