キャンセル可能ラジオボタン

• トップ
• How To
• キャンセル可能ラジオボタン

• 概要
• ソース
• 実行サンプル

概要

ラジオボタンは通常一度選択すると未選択の状態に戻すことができません。JavaScript を使用してキャンセル(未選択化する)することが可能なラジオボタンを作ってみました。選択済みのラジオボタンをもう一度クリックすると選択がキャンセルされます。

ソース

(function() {
  var selected_radio_button = {}
  Array.from(document.getElementsByClassName("cancel-radio")).forEach((e) => {
    e.addEventListener("click", (e) => {
      if (selected_radio_button[e.target.name] == e.target) {
        e.target.checked = false;
        selected_radio_button[e.target.name] = null
      } else {
        selected_radio_button[e.target.name] = e.target
      }
    })
  })
})();

<script src="cancel-radio.js"></script>

<div>
  <input class="cancel-radio" type="radio" name="radio1" value="a">AAA
  <input class="cancel-radio" type="radio" name="radio1" value="b">BBB
  <input class="cancel-radio" type="radio" name="radio1" value="c">CCC
</div>

<div>
  <input class="cancel-radio" type="radio" name="radio2" value="x">XXX
  <input class="cancel-radio" type="radio" name="radio2" value="y">YYY
  <input class="cancel-radio" type="radio" name="radio2" value="z">ZZZ
</div>

実行サンプル