【jQuery】選択中のラジオボタンのチェックを外す方法
ラジオボタンは一度選択をすると、選択肢のうち、どれかは必ず選択状態になってしまいます。
これがラジオボタンの仕様ですが、時には全て選択を解除したいという状況もあるかもしれません。
そんな時はjQueryを使うことで実現することが出来ます。
この記事ではjQueryを使い、ラジオボタンの選択状態を解除する方法をご紹介したいと思います。
完成コード
まずは完成コードを見てみましょう。
jQueryを読み込んだうえで下記のコードを使用します。
let checked_val;
$('input[type="radio"]').on('click', function() {
if ( $(this).val() === checked_val ) {
$(this).prop('checked', false);
checked_val = null;
}
else {
checked_val = $(this).val();
}
});実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
選択中の選択肢をクリックすると選択が解除されます。
解説
ここからはコードの解説です。
let checked_val;まずは選択中のラジオボタンの値を格納するための変数を用意します。
$('input[type="radio"]').on('click', function() { ... });jQueryの発火タイミングはラジオボタンをクリック（click）した時です。
jQueryには<input>タグの発火タイミングとしてinputやchangeがありますが、ラジオボタンの値を解除したい時には使うことが出来ません。
これらはどちらも値に変更があったタイミングで発火します。
今回の場合は選択中のラジオボタンをクリック必要があるため、値は変化しないためです。
if ( $(this).val() === checked_val ) {
$(this).prop('checked', false);
checked_val = null;
}
else {
checked_val = $(this).val();
}クリックしたラジオボタンの値と変数に格納されている値を比較し、同じ場合は$(this).prop('checked', false);の記述で選択中のラジオボタンの選択を解除します。
2つの値が一致しない場合は、その値を変数に格納します。
再度ラジオボタンをクリックした際は、この値と比較して、選択中かどうか確認します。
直前に変数に格納した値と今クリックしたラジオボタンの値が同じ場合は、2回連続でクリックしたと判別することが出来るようになります。
2回連続でクリックした場合は、そのラジオボタンの選択を解除します。
まとめ
いかがでしたか？
ラジオボタンの基本仕様はどちらかを選択することです。
そのため、一度選択するとどちらも未選択状態にするにはjQueryなどを使う必要があります。
間違えて選択してしまったユーザーのために実装しておくと親切かもしれないですね。
