リンク先にあるラジオボタンにチェックを入れて2段階目も表示

前提・実現したいこと

以前質問したラジオボタンで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

ソースは以前回答していただいたものをそのまま使用しています。

イメージ画像

↓実現したいこと(2段階目も表示)

↓実際はチェックが入るけど展開しない

kszk311

2018/02/28 09:25

やってみたソースコードを記載してください。他の質問のソースから派生した現象でも、こちらに独立した形で記載してください。

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

回答1件

ベストアンサー

ちょっと面倒になりますが、２つを組み合わせた上でchangeイベントを
発生させなくてはいけません
ここまで手のこんだことを始めるとピュアなjavascriptではなく
jQueryなどの導入を検討してもいいかもしれませんね

a.htm

HTML
1<a href="b.htm#move_0">バス</a>
2<a href="b.htm#move_1">電車</a>
3

b.htm

HTML
1<style>
2.second,.third{
3display: none;
4}
5</style>
6<script>
7window.addEventListener('DOMContentLoaded', function(e){
8  document.querySelector(location.hash).checked=true;
9  document.querySelector('[name="move"]:checked').trigger('change');
10});
11HTMLElement.prototype.trigger=function(eventStr){
12  if (document.createEvent) {
13    var e = document.createEvent("HTMLEvents");
14    e.initEvent(eventStr, true, true );
15    return this.dispatchEvent(e);
16  } else {
17    var e = document.createEventObject();
18    return this.fireEvent("on"+eventStr, e);
19  }
20};
21document.addEventListener('change',function(e){
22  var t=e.target;
23  if(t.name=="move"){
24    Array.prototype.forEach.call(document.querySelectorAll('.second,.third'),function(x){
25      if(x.id==t.value){
26        x.style.display="block";
27        Array.prototype.forEach.call(x.querySelectorAll('[type=radio]'),function(y){
28          y.checked=false;
29        });
30      }else{
31        x.style.display="none";
32      }
33    });
34  }
35  if(t.name=="grade"){
36    Array.prototype.forEach.call(document.querySelectorAll('.third'),function(x){
37      x.style.display=(x.id==t.value)?"block":"none";
38    });
39  }
40});
41</script>
42
43
44<form>
45<label><input type="radio" name="move" value="bus" id="move_0">バス</label>
46<label><input type="radio" name="move" value="train" id="move_1">電車</label>
47</form>
48<form>
49<div class="second" id="bus">
50<label><input type="radio" name="grade" value="bus_high" id="grade_0">バス/高級</label>
51<label><input type="radio" name="grade" value="bus_normal" id="grade_1">バス/普通</label>
52</div>
53<div class="second" id="train">
54<label><input type="radio" name="grade" value="train_high" id="grade_2">電車/高級</label>
55<label><input type="radio" name="grade" value="train_normal" id="grade_3">電車/普通</label>
56</div>
57</form>
58
59<div class="third" id="bus_high">高級バス</div>
60<div class="third" id="bus_normal">バス</div>
61<div class="third" id="train_high">高級電車</div>
62<div class="third" id="train_normal">電車</div>