【更新日 : 】
【JavaScript】radioボタンのチェックを外す機能を実装する
- Category：
- JavaScript
- Tags：
- JavaScript, radioボタン, Vanilla JS, フォーム
JavaScriptでradioボタンのチェックを外す機能を実装したサンプルです。
checkedされたradioボタンをもう一度クリックすると選択を解除します。
See the Pen Uncheck the radio button Vanilla JS by web_nak (@web_walking_nak) on CodePen.
HTML・CSS
特別な記述は特にありません。
JavaScript
//ラジオボタン取得
const radioBtns = Array.prototype.slice.call(document.querySelectorAll('input[type="radio"]'),0);
//ラジオボタンが存在する場合は処理する
if(radioBtns.length !== 0) {
//ラジオボタンごとの設定
radioBtns.forEach(function(radioBtn,index){
//ラジオボタン識別番号設定
radioBtn.radioIndex = index;
//チェックフラグ設定
if(radioBtn.checked) {
radioBtn.checkFlg = true;
} else {
radioBtn.checkFlg = false;
}
//クリックイベント設定
radioBtn.addEventListener('click', function() {
//番号を取得
const thisIndex = this.radioIndex;
//同じグループのラジオボタンを取得
const group = Array.prototype.slice.call(document.querySelectorAll('input[type="radio"][name="'+radioBtn.name+'"]'),0);
//未チェックの場合
if(!this.checkFlg) {
//チェックフラグオン（checkedはJSで書かずともtrueになるので省略）
this.checkFlg = true;
//チェックした要素以外のフラグをfalseに
group.forEach(function(elm){
if(elm.checkFlg && elm.radioIndex !== thisIndex) {
elm.checkFlg = false;
}
});
} else {
//既にチェックしている場合（リセット処理）
group.forEach(function(elm){
//チェックフラグがtrueかつ識別番号が一致するradio要素
if(elm.checkFlg && elm.radioIndex === thisIndex) {
//チェックフラグfalse
elm.checkFlg = false;
//ラジオボタンのチェック解除
elm.checked = false;
}
});
}
});
});
}