Roroa.

こんにちはkazukiです。
今回はたまに使うinputのラジオボタンを2度押しするとチェックが外れるようになる方法をメモしたいと思います。

通常ラジオボタンは一度チェック（クリック）しまうと、他の選択肢をチェックすることはできますが、チェックを外せない仕様になっています。

なのでチェックを外したい場合はjsを使って外すことになります。

チェックを外すコード

var radio_val;
$('input[type="radio"]').on('click',function(){
	if($(this).val() == radio_val) {
		$(this).prop('checked', false);
		radio_val = null;
	} else {
		radio_val = $(this).val();
	}
});

上記がチェックを外すコードになります。

jsの流れ

私の解釈？ロジック？どういう言い方が正しいか曖昧ですが、動作の流れをまず説明します。

1. ラジオボタンをクリックする（1回目）
2. クリックされたボタンのvalueの値を取得
3. 取得したvalueの値と「radio_val」に代入してある値を比較
4. 比較した結果、同じであればチェックを外して「radio_val」を空にする
5. 比較した結果、異なる場合はそのままチェックし「radio_val」の値をクリックされたvalueの値に変える

こんな感じです。

コードの解説

次に簡単なコードの説明をします。

1.ラジオボタンをクリックする（1回目）

$('input[type="radio"]').on('click',function(){});

これでクリックした時になり、{}の中にどうして欲しいか書き加えていきます。

2.クリックされたボタンのvalueの値を取得

if($(this).val() == radio_val) {}

この部分の$(this).val()で値を取得しています。

3.取得したvalueの値と「radio_val」に代入してある値を比較

if($(this).val() == radio_val) {}

こちらは先ほどの（2）と同じ箇所なのですが、$(this).val()で値を取得し、もし（if）「radio_val」の値と同じならばというところです。

4.比較した結果、同じであればチェックを外して「radio_val」を空にする

$(this).prop('checked', false);
radio_val = null;

ここでクリックされた$(this)のチェック状態をfalseにする（チェックを外す）という処理をしています。（逆につける場合は、trueです）

そして「radio_val」をnullで空にしています。
これはvalue=””のように空の場合もあるのでこのような処理をしています。

5.比較した結果、異なる場合はそのままチェックし「radio_val」の値をクリックされたvalueの値に変える

else {
	radio_val = $(this).val();
}

この部分です。
if文のelseを使い、それ以外の場合の処理をここに記載します。

今回はチェックはそのまま付け、「radio_val」の値だけを変えたいのでこれだけで終了です。

以上、inputのラジオボタンのチェックを外す方法の説明でした。