ラジオボタンを2度押しで解除する(JavaScript, jQuery)

inputタグのtype属性にradioを指定すると、ラジオボタンとして機能します。 本来は入力フォームで必ず入力して欲しい箇所や、１つだけ選択してほしい箇所に使うことが多いかと思います。 しかし、同じラジオボタンを再度クリックしたらチェックを外すという動作が必要になる場面があります。 そういった場合にはJavaScriptで制御する必要がありますので、本記事ではその方法を紹介します。

2度押しでチェック解除（jQuery）

２回クリックしたらクリック解除がされるソースと、サンプルとして動作するものを紹介します。 まずはjQueryでの書き方です。

サンプル（jQuery）

ソース（jQuery）

<label class="radio-label">
  <input type="radio" name="radio">
  <span>ラジオボタン1</span>
</label>
<label class="radio-label">
  <input type="radio" name="radio">
  <span>ラジオボタン2</span>
</label>

<script>
  $(function () {
    $('.radio-label').on('click', function(event) {
      // 既定の動作をキャンセル(今回はinputにcheckedが入るのをキャンセル)
      event.preventDefault();
      
      // チェック済みの場合はチェックを外し、未チェックの場合はチェックを入れる
      var $input = $(this).find('input');
      $input.prop('checked', !$input.prop('checked'));
    });
  });
</script>

まず、event.preventDefault();を使って、チェックボックスにチェックをつける動作を抑制します。 本来の動作抑制するので、チェックを「つける」「つけない」の処理は自作します。 チェックを「つける」「つけない」の処理は「!（論理否定演算子）」で真偽値を反転しています。

2度押しでチェック解除（JavaScript）

今度はjQueryではなくJavaScriptでの書き方を紹介します。 やることはjQueryで説明したことと同じです。

サンプル（JavaScript）

ソース（JavaScript）

<label class="radio-label">
  <input type="radio" name="radio">
  <span>ラジオボタン1</span>
</label>
<label class="radio-label">
  <input type="radio" name="radio">
  <span>ラジオボタン2</span>
</label>

<script>
  document.addEventListener('DOMContentLoaded', function(){
    // 要素を取得してクリックイベントを付与
    var radioLabel = document.getElementsByClassName('radio-label');
    for (var i = 0; i < radioLabel.length; i++) {
      radioLabel[i].addEventListener('click', function(event){
        // 既定の動作をキャンセル(今回はinputにcheckedが入るのをキャンセル)
        event.preventDefault();

        // チェック済みの場合はチェックを外し、未チェックの場合はチェックを入れる
        var inputEl = this.querySelector('input');
        inputEl.checked = !inputEl.checked;
      });
    }
  });
</script>