更新日:2024年10月18日
header部に登録必須
$(function(){ // ラジオボタン 二度押しでチェックを外す処理 //
//ポイントは、「マウスをクリックして指を離したタイミングでラジオボタンが //
//OFF なら ON にする」というラジオボタンの基本的な挙動です。 //
//mouseup イベント時、単純にラジオボックスが ON(checked=true) なら OFF(checked=false) という風にすると//
// 指を離す //
// ↓ //
// JavaScript の処理でラジオボタンを OFF にする //
// ↓ //
// 指を離したタイミングでラジオボタンが OFF なので ON になる //
//という一連の処理が瞬時に行われ、ON/OFF の切り替えがうまくできません。 //
//そのため、setTimeout で ラジオボタンを OFF にするタイミングを少しだけずらしています。//
//上部(name)項目の切り替え時 下部(name)項目の選択状態をクリアする処理を追加(俊夫)
//ハンバーガーメニュー釦押下時(checkbox) 全項目の選択状態をクリアする処理を追加(俊夫)
const radioButtons = document.querySelectorAll('input[type="radio"]');
const clearRadioButton = (radioButton) => {
setTimeout(func =()=>{
radioButton.checked = false;
},100)
}
//--- 下部の項目の選択状態をクリアする処理(引数はチェック項目の 'name') ---
function RbtnCLR ( radbtnname ) { // ラジオボタン name の下部項目の ボタンを初期化する "zenbu"の場合全項目
if (radbtnname === "menu-1st") { //最上位(親項目選択時
for (const element of document.getElementsByName("menu-2nd")) {
element.checked = false;
};
for (const element of document.getElementsByName("menu-3rd")) {
element.checked = false;
};
for (const element of document.getElementsByName("menu-4th")) {
element.checked = false;
};
} else { if (radbtnname === "menu-2nd") { //2番目(子ども)項目選択時
for (const element of document.getElementsByName("menu-3rd")) {
element.checked = false;
};
for (const element of document.getElementsByName("menu-4th")) {
element.checked = false;
};
} else { if (radbtnname === "menu-3rd") { //3番目(孫)項目選択時
for (const element of document.getElementsByName("menu-4th")) {
element.checked = false;
};
} else { if (radbtnname === "zenbu") { //ハンバーグメニュー ON時(check-box) 全項目初期化
for (const element of document.getElementsByName("menu-1st")) {
element.checked = false;
};
for (const element of document.getElementsByName("menu-2nd")) {
element.checked = false;
};
for (const element of document.getElementsByName("menu-3rd")) {
element.checked = false;
};
for (const element of document.getElementsByName("menu-4th")) {
element.checked = false;
};
};
};
};
};
};
//--- ハンバーガメニュー ON時 全項目(ラジオ釦)の選択状態をクリア ---
const triggerCheckbox = document.querySelector('input[id="menu-navibtn"]');
triggerCheckbox.addEventListener('change', function() { //ハンバーガーボタンの状態検出
if (this.checked) {
//document.write ('ON');
} else {
//document.write ('OFF');
RbtnCLR( 'zenbu' ); //ラジオ釦 全項目のクリア(初期状態)
}
}, false);
//--- 選択状態の項目二度押しで状態クリアする(項目チェンジ時も) ---
//--- 同時にそれより下部項目で選択状態の項目も選択状態をクリア ---
radioButtons.forEach(radioButton => { // ラジオ釦全idを取得
let queryStr = 'label[for="' + radioButton.id + '"]'
let label = document.querySelector(queryStr)
radioButton.addEventListener("mouseup", func=()=>{ //ラジオ釦からマウスオフ時
if(radioButton.checked){ //チェックされた項目を再度クリックしたとき//
clearRadioButton(radioButton)
//下部項目ボタンクリア実行
let radiname = radioButton.name //チェックされた ラジオ釦名(name)取得
RbtnCLR( radiname );
}else{ //チェックされていない他の項目をクリックしたときの処理
//下部項目ボタンクリア実行
let radiname = radioButton.name //チェックされた ラジオ釦名(name)取得
RbtnCLR( radiname );
}
});
if(label){ //ラジオ釦に括り付けられたラベルの場合の処理
label.addEventListener("mouseup", func=()=>{ //ラベルエリアからマウスオフ時
if(radioButton.checked){ //チェックされた項目を再度クリックしたとき
clearRadioButton(radioButton)
//下部項目ボタンクリア実行
let radiname = radioButton.name //チェックされた ラジオ釦名(name)取得
RbtnCLR( radiname );
}else{ //チェックされていない他の項目をクリックしたときの処理
//下部項目ボタンクリア実行
let radiname = radioButton.name //チェックされた ラジオ釦名(name)取得
RbtnCLR( radiname );
}
});
}
});
});
-->