小粋空間  -  a cheap joke and a play on words site

ラジオボタンをjQueryで解除する方法

ラジオボタンをjQueryで解除する方法を紹介します。

１．問題点

次のようなラジオボタンがあるとします。

<input type="radio" name="foo" value="1">1
<input type="radio" name="foo" value="2">2
<input type="radio" name="foo" value="3">3

このラジオボタンのいずれかを選択したあと、通常は選択を解除することができません。

が、選択したラジオボタンを解除できるようにしたいのですが方法が分かりません。

２．ラジオボタンを解除する（checked属性がない場合）

ラジオボタンを解除するには、次のようなjQueryを追加します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
var number;
$(function(){
    $('input').click(function(){
        if($(this).val() == number) {
            $(this).prop('checked', false);
            number = 0;
        } else {
            number = $(this).val();
        }
    });
});
</script>

このスクリプトで、選択したラジオボタンをもう一度クリックすれば選択が解除されます。

仕組みの説明ですが、ラジオボタンのクリックイベントで、if文で選択したラジオボタンの値とnumberを比較します。

    $('input').click(function(){
        if($(this).val() == number) {

初回はnumberは値が設定されていないので、elseブロックでラジオボタンの値をnumberに設定します。

            number = $(this).val();

2回目以降、選択したラジオボタンの値とnumberが等しければ、選択中のラジオボタンを再選択したと判断して、ラジオボタンの値をfalseに変更し、numberをクリアします。

            $(this).prop('checked', false);
            number = 0;

ラジオボタンの値とnumberが等しくなければ異なるラジオボタンを選択したと判断して、elseブロックで新たなラジオボタンの値をnumberに設定します。

            number = $(this).val();

２．ラジオボタンを解除する（checked属性がある場合）

ラジオボタンのいずれかにchecked属性がある場合、初回の読み込みでボタンが選択された状態になるため、その状態を保持する処理（赤色）が必要になります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
var number;
$(function(){
    number = $('input:checked').val();
    $('input').click(function(){
        if($(this).val() == number) {
            $(this).prop('checked', false);
            number = 0;
        } else {
            number = $(this).val();
        }
    });
});
</script>

３．参考サイト

参考サイトは下記です。ありがとうございました。

• 二度押しで選択解除できるラジオボタン