JavaScript または jQuery を使用してラジオボタンをチェックする方法

Debolina Dasgupta 2023年10月12日

jQuery

JavaScript を使用してラジオボタンを確認する
jQuery を使用してラジオボタンを確認する
ボタンのクリックに基づいてラジオボタンを確認する

私たちは jQuery や JavaScript などのクライアント側スクリプトを使用して、インタラクティブで高速な Web サイトを作成し、フォーム検証などの単純な操作を Web サーバーに余計な手間をかけることなく効率的に完了できます。

デフォルトで、またはボタンクリックイベントでラジオボタンを選択するシナリオを考えると、JavaScript または jQuery を使用できます。

フォームを定義することから始めましょう。

    <div id='radiobuttonset'>
        <input type='radio' id='myradio_1' name='radiobutton' value='1' />1
        <input type='radio' id='myradio_2' name='radiobutton' value='2' />2
        <input type='radio' id='myradio_3' name='radiobutton' value='3' />3 
    </div>

JavaScript を使用してラジオボタンを確認する

ID を使用してラジオボタンを選択する

ラジオボタンを事前に選択する最良の方法の 1つは、ID で参照することです。ID を使用して DOM 要素を選択するには、ID にプレフィックス # を追加し、checked 値を true に設定します。

document.querySelector('#myradio_1').checked = true;

出力：ラジオボタン 1 が選択されています。

値を使用してラジオボタンを選択する

別のオプションは、ラジオボタンの値を使用してラジオボタンを事前選択することです。値による選択は、ラジオボタンの ID はわからないが値はわかっている場合に役立ちます。

親 div の ID を使用して、値が 2 の要素を選択できます。次に、checked 属性を true に設定できます。

document.querySelector('#radiobuttonset > [value="2"]').checked = true;

出力：ラジオボタン 2 が選択されています。

事前定義された値に等しい他の要素が DOM にないことがわかっているいくつかのケースでは、値を確認するだけで要素を選択できます。この場合、親 ID は必要ありません。

document.querySelector('[value="3"]').checked = true;

出力：ラジオボタン 3 が選択されています。

jQuery を使用してラジオボタンを確認する

JavaScript の使用とは別に、jQuery ライブラリを使用して、事前定義された値に基づいてラジオボタンをチェックすることもできます。jQuery は、JavaScript を使用して構築されたライブラリです。HTML DOM トラバーサルと操作を簡素化するのに役立ちます。jQuery の構文も JavaScript よりも単純です。

jQuery を使用して追加するには、CDN またはローカルファイルから jQuery ライブラリへの参照を追加します。

ID を使用してラジオボタンを選択する

JavaScript のように、ID を使用して DOM 要素にアクセスするには、接頭辞 # を使用します。ただし、正確な構文は、使用する jQuery のリリースによって異なります。

現在の安定した jQuery バージョンは 3.4.1 です。

jQuery のバージョンが 1.6 以上である（> =）1.6

使用する jQuery のバージョンが 1.6 以上の場合、prop を使用して、checked 属性を true に設定します。

$('#myradio_1').prop('checked', true);

出力：ラジオボタン 1 が選択されています。

jQuery のバージョンが（<）1.6 より前のバージョンである

jQuery のバージョンが 1.6 より前の場合、attr をオンにして更新できます。

$('#myradio_2').attr('checked', 'checked');

出力：ラジオボタン 2 が選択されています

値を使用してラジオボタンを選択する

ボタンの値に基づいて、ラジオボタンの選択値を更新することもできます。

$('input[name=radiobutton][value=\'1\']').prop('checked', true);

出力：ラジオボタン 2 が選択されています

ボタンのクリックに基づいてラジオボタンを確認する

JavaScript または jQuery を使用してラジオボタンを更新する方法がわかったら、ボタンクリックなどのイベントに基づいて、またはその他の要素選択による選択を更新できます。テストするために、フォームを更新してボタンを追加しましょう。

<div id='radiobuttonset'>
     <input type='radio' id='myradio_1' name='radiobutton' value='1' />1
     <input type='radio' id='myradio_2' name='radiobutton' value='2' />2
     <input type='radio' id='myradio_3' name='radiobutton' value='3' />3 
</div>
    <button id="button_1">check 1</button>

次に、ボタンにクリックイベントを追加します。クリックすると、最初のラジオボタンが選択されます。

$('#button_1').click(function() {
  $('input[name=radiobutton]').val(['1']);
});

出力：ラジオボタン 1 が選択されています