【javascript】クリックしてラジオボタンのチェックを外す

投稿日 : 2022年04月16日 更新日 :

javascriptでチェックを外す

  input.checked.true;
  input.checked.false;

チェックを外すボタンを設置

  <div class="wrapper">
    <input type="radio" value="1"/>
    <input type="radio" value="2"/>
    <input type="radio" value="3"/>
    <input type="radio" value="4"/>
    <input type="radio" value="5"/>
    <button onclick="deleteChecked()">チェックを外す</button>
  </div>

  const input = document.querySelectorAll(".input");
  function deleteChecked() {
    input.forEach((e) => {
      if (e.checked == true) {
        e.checked = false;
      }
    });
  }

ラジオボタンをクリックし、チェックを外す

引数に数字を設定し、判別する

  <div class="wrapper">
    <input name="test" type="radio" onclick="deleteChecked(this, 1)" />
    <input name="test" type="radio" onclick="deleteChecked(this, 2)" />
    <input name="test" type="radio" onclick="deleteChecked(this, 3)" />
    <input name="test" type="radio" onclick="deleteChecked(this, 4)" />
    <input name="test" type="radio" onclick="deleteChecked(this, 5)" />
  </div>

  let num = 0; // 最初は0に
  function deleteChecked(obj, currentNum) {
    if (num == currentNum) {
      // numと第二引数の数字が同じとき
      obj.checked = false;  // チェックが外れる
      num = 0;  // 初期状態に
    } else {  
      // クリックしたらチェックが入り、numが第二引数の数字になる
      num = currentNum;
    }
  }

data属性を使う

nameを設定しない場合

   <div class="wrapper">
    <input type="radio" data-value="false" onclick="deleteChecked(this)" />
    <input type="radio" data-value="false" onclick="deleteChecked(this)" />
    <input type="radio" data-value="false" onclick="deleteChecked(this)" />
    <input type="radio" data-value="false" onclick="deleteChecked(this)" />
    <input type="radio" data-value="false" onclick="deleteChecked(this)" />
  </div>

  function deleteChecked(obj) {
    if (obj.dataset.value == "false") {
      obj.dataset.value = "true";
    } else {
      obj.dataset.value = "false";
      obj.checked = false;
    }
  }

name属性を設定する場合

   <div class="wrapper">
<input name="test" type="radio" data-value="false" onclick="deleteChecked(this)" />
<input name="test" type="radio" data-value="false" onclick="deleteChecked(this)" />
<input name="test" type="radio" data-value="false" onclick="deleteChecked(this)" />
<input name="test" type="radio" data-value="false" onclick="deleteChecked(this)" />
<input name="test" type="radio" data-value="false" onclick="deleteChecked(this)" />
</div>

展開

  function deleteChecked(obj) {
    if(obj.hasAttribute("name")){ // name属性がある場合
      selectOne();
    }
    if (obj.dataset.value == "false") {
      obj.dataset.value = "true";
    } else {
      obj.dataset.value = "false";
      obj.checked = false;
    }
  }

  function selectOne(){
    const input = document.querySelectorAll(".wrapper input");
    input.forEach(element => {
        // チェックがなく、data属性の値が「true」の時
        if(element.checked == false && element.dataset.value=="true"){
          element.dataset.value = "false";
        }
    });
  }

参考

【javascript】onclickの書き方と使い方 クリックした値を取得する

【javascript】属性を設定(setAttribute)、取得(getAttribute)、確認(hasAttribute)する

【javascript】data属性とは？datasetで、取得、更新、追加する方法

まとめ