ノラWEB屋 野良人(のらんど)- 個人営業のWEB屋さん

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

2017年9月10日

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

    基本形:ラジオボタンのグループが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') );
    	}
    });
    
    デモ

    ポイント

    • ボタンにはid必要
    • チェックされたボタンを配列で保存
    • $.inArrayメソッドでクリックしたボタンがチェックされているかどうかを判定
    • 同じname属性のラジオボタンがチェックされていないか調べて変数から削除

    ややもっさりした感じがしますが、とりあえず意図した挙動になりました。

    めんどくさかったら、ラジオボタンの選択肢に「なし」とか「無回答」みたいな選択肢を付けといて、そこにチェックがあったら無視する、みたいなやり方でも全然問題ないとは思いますが、まー解除できた方が親切な場合もあるぞ、ということで。

    このエントリーをはてなブックマークに追加