Web production note

　【更新日 : 】

【JavaScript】radioボタンのチェックを外す機能を実装する

Category：
JavaScript
Tags：
, , ,

JavaScriptでradioボタンのチェックを外す機能を実装したサンプルです。
checkedされたradioボタンをもう一度クリックすると選択を解除します。

codepen

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;
          }
        });
      }
    });
  });
}

参考リンク