【jQuery】ラジオボタンのチェックを外す方法（2回クリックでchecked解除）

こんにちは、Ryohei（@ityryohei）です！

本記事では、チェック済みのラジオボタンをクリックすると、checkedを解除するjQueryのスクリプトをご紹介しています。

フォーム等でよく見かけるラジオボタンは、初期状態だと何も選択されていない状態になっています。複数の選択肢が用意されていて、その中から一つを選ぶと、選択を変更することはできますが、解除することができないものが多いかと思います。

必須項目でラジオボタンを使用する場合や、何も選んでいない状態と同等の選択肢（例：「なし」等）を用意しておけば特段問題はないのですが、そうでない場合はやはりラジオボタンといえでもチェックを外せた方が良いのではないかと思います。（もちろん、他に解除する手段が用意されていれば問題ないですよ！）

実装イメージとしては、下記のデモのような動きになります。複数の中から一つのラジオボタンを選択した後、選択済みのラジオボタンを再度クリックすると、黒いぽっちが外れて未選択の状態になります。

See the Pen
Radio button that can be unchecked｜jQuery by ryohei (@intotheprogram)
on CodePen.

本記事では上記の処理の実装方法についてご紹介していきます。

では、解説していきます。

基本となるラジオボタンを用意する

特殊な記述等は必要ないので、普通のラジオボタンを作成しましょう。下記はデモで使用しているラジオボタン群になります。検証のため、それぞれに一意のvalueを持たせています。

HTML

<div id="app">
    <label><input type="radio" name="radio" value="1" checked>Radio Button 1</label>
    <label><input type="radio" name="radio" value="2">Radio Button 2</label>
    <label><input type="radio" name="radio" value="3">Radio Button 3</label>
    <label><input type="radio" name="radio" value="4">Radio Button 4</label>
</div>

ラジオボタンのチェックが外れる処理を作成する

ラジオボタンのチェックを外す処理を作成します。下記のような処理の流れになります。

• 1. ラジオボタンのinputをすべて取得する
• 2. 「:checked」を持っているラジオボタンの値を取得する
• 3. クリックされたラジオボタンと「:checked」の値を比較する
• 4. 同じ値の場合は「:checked」を外し、そうでなければ「:checked」を付与する

内容としてはこれでいけると思います。コーディングする前に何をするためのものなのか整理すると、目的が明確になるのでおすすめです！

では、実際にスクリプトを作成してみます。各行の処理内容についてはコメントをご参照ください。

JS

$(function(){
    
    //インプット要素を取得する
    var inputs = $('input');
    //読み込み時に「:checked」の疑似クラスを持っているinputの値を取得する
    var checked = inputs.filter(':checked').val();
    
    //インプット要素がクリックされたら
    inputs.on('click', function(){
        
        //クリックされたinputとcheckedを比較
        if($(this).val() === checked) {
            //inputの「:checked」をfalse
            $(this).prop('checked', false);
            //checkedを初期化
            checked = '';
            
        } else {
            //inputの「:checked」をtrue
            $(this).prop('checked', true);
            //inputの値をcheckedに代入
            checked = $(this).val();
            
        }
    });
    
});

以上でスクリプトは完了です。

最後に

いかがでしたでしょうか。

フォーム等で必須の項目ではないけれどラジオボタンを使用したい場合にご活用いただければと思います。

以上、jQueryでラジオボタンのチェックを外す方法！2回クリックでchecked解除する方法のご紹介でした！