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

目次

概要

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

ソース

cancel-radio.js
(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
      }
    })
  })
})();
sampele.html
<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>

実行サンプル

AAA BBB CCC
XXX YYY ZZZ