ラジオボタンを2度押しで選択解除する（複数グループ）

2017/09/10

ラジオボタンを選択解除できるようにするやつをやったので書いておきます。

基本形：ラジオボタンのグループが1個の場合
ラジオボタンのグループが複数の場合
1. ポイント

基本形：ラジオボタンのグループが1個の場合

同じラジオボタンを再度クリックしたらチェックを外すという挙動が欲しい場合もありますが、ラジオボタンは選択されてしまうと解除できないため、javascriptでこれをやります（jQueryを使います）。

これはこちらの記事のコードが大変分かりやすいです↓そのまんまでいいと思います。

jQuery

var nowchecked = $('input[name=xxxx]:checked').val();
$('input[name=xxxx]').click(function(){
	if($(this).val() == nowchecked) {
		$(this).prop('checked', false);
		nowchecked = false;
	} else {
		nowchecked = $(this).val();
	}
});

ラジオボタンのグループが複数の場合

こういう場合です。

HTML

<input type="radio" name="radio1" id="radio1_1" value="1">
<input type="radio" name="radio1" id="radio1_2" value="2">
<input type="radio" name="radio1" id="radio1_3" value="3">

<input type="radio" name="radio2" id="radio2_1" value="1">
<input type="radio" name="radio2" id="radio2_2" value="2">
<input type="radio" name="radio2" id="radio2_3" value="3">

このケースで上記のjsでやろうと思うと、同じものをコピペしてnameの部分を書き換えていく感じになると思いますが、数が増えるとまぁまぁめんどくさくなってしまいます。

なお、nameの部分を外して $(‘input[type=”radio”]:checked’)とかやると謎の挙動になるのでやめましょう。

こういった場合に対応するため、基本形を少し書き換えます。

jQuery

// 予めチェックされているもの
var nowchecked = [];
$('input[type="radio"]:checked').each(function(){
  nowchecked.push( $(this).attr('id') );
});

$('input[type="radio"]').click(function(){
  var idx = $.inArray( $(this).attr('id'), nowchecked ); // nowcheckedにクリックされたボタンのidが含まれるか判定。なければ-1が返る。
	if( idx >= 0 ) { // クリックしたボタンにチェックが入っていた場合
		$(this).prop('checked', false); // チェックを外す
		nowchecked.splice(idx,1); // nowcheckedからこのボタンのidを削除
	} else { // チェックが入っていなかった場合
	// 同じname属性のラジオボタンをnowcheckedから削除する
    var name = $(this).attr('name');
    $('input[name="' + name + '"]').each(function(){
      var idx2 = $.inArray( $(this).attr('id'), nowchecked);
      if( idx2 >= 0 ){
        nowchecked.splice(idx2,1);
      }
    });
    // チェックしたものをnowcheckedに追加
		nowchecked.push( $(this).attr('id') );
	}
});

デモ