Q&A
// リンククリックでラジオボタンにチェック入れる
の項目の後に入れればいいんですよね…？
どちらも出来ませんでした…
前提・実現したいこと
ラジオボタンが選択された状態のままを解除したい
発生している問題・エラーメッセージ
Aページからリンクを選択→Bページでラジオボタンにチェックが入っている
この後F5キーを押しても初期画面に戻らずラジオボタンが選択された状態のままになってしまいます。
該当のソースコード
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>
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//ラジオボタン2段階で表示 9window.addEventListener('DOMContentLoaded', function(e){ 10 document.querySelector(location.hash).checked=true; 11 document.querySelector('[name="move"]:checked').trigger('change'); 12 }); 13 HTMLElement.prototype.trigger=function(eventStr){ 14 if (document.createEvent) { 15 var e = document.createEvent("HTMLEvents"); 16 e.initEvent(eventStr, true, true ); 17 return this.dispatchEvent(e); 18 } else { 19 var e = document.createEventObject(); 20 return this.fireEvent("on"+eventStr, e); 21 } 22 }; 23 document.addEventListener('change',function(e){ 24 var t=e.target; 25 if(t.name=="move"){ 26 Array.prototype.forEach.call(document.querySelectorAll('.second,.third'),function(x){ 27 if(x.id==t.value){ 28 x.style.display="block"; 29 Array.prototype.forEach.call(x.querySelectorAll('[type=radio]'),function(y){ 30 y.checked=false; 31 }); 32 // ここでスムーススクロールを実行 33 var speed = 800; // ミリ秒で記述 34 // アンカーの値取得 35 // 移動先を数値で取得 36 var position = $(x).offset().top; 37 // スムーススクロール 38 $("html, body").animate({scrollTop:position}, speed, "swing"); 39 }else{ 40 x.style.display="none"; 41 } 42 }); 43 } 44 if(t.name=="grade"){ 45 Array.prototype.forEach.call(document.querySelectorAll('.third'),function(x){ 46 x.style.display=(x.id==t.value)?"block":"none"; 47 // ここでスムーススクロールを実行 48 if (x.id==t.value) { 49 var speed = 800; // ミリ秒で記述 50 // アンカーの値取得 51 // 移動先を数値で取得 52 var position = $(x).offset().top; 53 // スムーススクロール 54 $("html, body").animate({scrollTop:position}, speed, "swing"); 55 } 56 }); 57 } 58 }); 59
css
1/* ラジオボタン */ 2[name=status_x] { 3 display: none; 4} 5[name=status_x]+div { 6 display: none; 7} 8[name=status_x]:checked+div { 9 display: block; 10} 11.second , .third{ 12 display: none; 13} 14
補足情報
更新(F5)した後何も選択されない状態にするにはどうしたらよいのでしょうか？
回答4件
0
自己解決
js
1window.addEventListener('DOMContentLoaded', function(e){
上記の後に下記を入れたところうまく行きました。
js
1if(performance.navigation.type == 1 && location.hash){ 2location.href = location.href.replace(/#.*/, ""); 3}
みなさまご回答ありがとうございました。
投稿2018/03/15 07:46
総合スコア20
0
問題ないならダミーにcheckedいれて非表示とか
html
1<div class="second" id="bus"> 2 <label><input type="radio" name="grade" value="bus_high">バス/高級</label> 3 <label><input type="radio" name="grade" value="bus_normal">バス/普通</label> 4 <input type="radio" name="grade" value="dummy" style="display:none;" checked> 5</div>
訂正：ごめんなさい質問勘違いしてましたm(_ _)m
関係なさそうなので読み飛ばしてください…
投稿2018/03/14 12:47
編集2018/03/14 12:50
総合スコア3828
0
もしF5キーの制御だけでいいならkeycodeを利用して
更新を横取りしてハッシュを消すだけでいけませんか？
javascript
1document.addEventListener('keydown', function(e){ 2 if(e.keyCode==116){ 3 e.preventDefault(); 4 location.href=location.href.replace(/#.+$/,''); 5 } 6});
ハッシュをはずしてもチェックが消えないならこう？
javascript
1window.addEventListener('DOMContentLoaded', function(e){ 2 Array.prototype.forEach.call(document.querySelectorAll('input[type=radio]:checked'),function(x){ 3 x.checked=false; 4 }); 5});
投稿2018/03/14 10:20
総合スコア114829
0
質問の字面だけみるとinput要素にautocomplete="off"を設定すれば良いかも.
(動作の確証はありませんが)
HTML
1<label><input type="radio" name="move" value="bus" id="kind-1" autocomplete="off">バス</label>
参考
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input
投稿2018/03/14 10:08
編集2018/03/15 04:06
総合スコア4756
どのような形でautocomplete="off"を入れたらいいのでしょうか･･･
(対象となる全ての)input要素に属性値として指定して下さい.
指定してみましたが変わりませんでした･･･
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/15 07:52