【jQuery】選択中のラジオボタンのチェックを外す方法

ラジオボタンを使ったフォームで、ユーザーが選択したラジオボタンのチェックを外したい場合、jQueryを活用すると便利です。この記事では、jQueryを使って選択中のラジオボタンのチェックを外す方法を解説します。

HTMLフォームの準備

まずは、以下のようなHTMLフォームを準備します。

<form id="myForm">
    <input type="radio" name="myRadio" value="1"> Option 1<br>
    <input type="radio" name="myRadio" value="2"> Option 2<br>
    <input type="radio" name="myRadio" value="3"> Option 3<br>
</form>
<button id="uncheckButton">チェックを外す</button>

jQueryを使ったチェック外しの実装

次に、jQueryを使って選択中のラジオボタンのチェックを外すコードを実装します。

$(document).ready(function(){
    $('#uncheckButton').click(function(){
        $('input[name="myRadio"]:checked').prop('checked', false);
    });
});

• HTMLフォーム: ユーザーが選択するラジオボタンが用意されています。
• jQueryのコード: $(document).ready()でドキュメントの読み込み完了後に処理を開始します。#uncheckButtonがクリックされたら、選択されているラジオボタンを取得し、.prop(‘checked’, false)でチェックを外します。