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

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

Posted at February 3,2016 1:55 AM
Tag:[jQuery]

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

1.問題点

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

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

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

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

2.ラジオボタンを解除する(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();

2.ラジオボタンを解除する(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>

3.参考サイト

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

関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)