前提・実現したいこと
以前質問したラジオボタンで2段階表示とラジオボタンにチェックの二つの組み合わせです。
Aページからリンクを選択→Bページでラジオボタンにチェックが入っている(この時点で2段階目も表示したい)
発生している問題・エラーメッセージ
ラジオボタンにチェックは付くのですが、
2段階目のラジオボタンが表示されないです。
該当のソースコード
html
1<body> 2 <form> 3 <label><input type="radio" name="move" value="bus" id="kind-1">バス</label> 4 <label><input type="radio" name="move" value="train">電車</label> 5 </form> 6 <form> 7 <div class="second" id="bus"> 8 <label><input type="radio" name="grade" value="bus_high">バス/高級</label> 9 <label><input type="radio" name="grade" value="bus_normal">バス/普通</label> 10 </div> 11 <div class="second" id="train"> 12 <label><input type="radio" name="grade" value="train_high">電車/高級</label> 13 <label><input type="radio" name="grade" value="train_normal">電車/普通</label> 14 </div> 15 </form> 16 17 <div class="third" id="bus_high">高級バス</div> 18 <div class="third" id="bus_normal">バス</div> 19 <div class="third" id="train_high">高級電車</div> 20 <div class="third" id="train_normal">電車</div> 21</body> 22
css
1.second , .third{ 2display: none; 3}
js
1// ラジオボタンで表示/非表示 2document.addEventListener('change',function(e){ 3 var t=e.target; 4 if(t.name=="status") document.querySelector('#'+t.value).checked=true; 5 }); 6 7 8// リンククリックでラジオボタンにチェック入れる 9window.addEventListener('DOMContentLoaded', function(e){ 10 document.querySelector(location.hash).checked=true; 11 }); 12 13 14// ラジオボタン2段階で表示 15document.addEventListener('change',function(e){ 16 var t=e.target; 17 if(t.name=="move"){ 18 Array.prototype.forEach.call(document.querySelectorAll('.second,.third'),function(x){ 19 if(x.id==t.value){ 20 x.style.display="block"; 21 Array.prototype.forEach.call(x.querySelectorAll('[type=radio]'),function(y){ 22 y.checked=false; 23 }); 24 }else{ 25 x.style.display="none"; 26 } 27 }); 28 } 29 if(t.name=="grade"){ 30 Array.prototype.forEach.call(document.querySelectorAll('.third'),function(x){ 31 x.style.display=(x.id==t.value)?"block":"none"; 32 }); 33 } 34 }); 35
ソースは以前回答していただいたものをそのまま使用しています。
イメージ画像
回答1件
あなたの回答
tips
プレビュー