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

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

  1. 基本形:ラジオボタンのグループが1個の場合
  2. ラジオボタンのグループが複数の場合
    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') );
	}
});
デモ

ポイント

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

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

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

サポートが必要ですか?

ご質問・お見積り依頼はお気軽にどうぞ

お問い合わせはこちら
シェア
野良人 代表
新免祥太
1988年岡山生まれ。外食企業のWEB・EC担当を経験したのち、2013年12月より「野良人(のらんど)」の屋号で独立しWEBデザイン・プログラミングなどWEBサイト制作の工程全般を請け負っています。お気軽にご相談ください。
広告
次の記事(2017/09/29)
POSTを受け取れないと思ったら上限の問題だった
前の記事(2017/07/06)
レスポンシブデザインでスマホだけアコーディオン
記事一覧