• HOME > 
  • JavaScript > 
  • JavaScriptでラジオボタンの値(value)を取得す...

JavaScriptでラジオボタンの値(value)を取得する方法

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

JSでラジオボタンの値を取得・操作する

JavaScriptによるラジオボタンの操作(値の取得やチェックの切り替え)の方法を備忘録として残しておきます。

JSでラジオボタンを操作できれば、下図のようにチェックされたラジオボタンの値をリアルタイムで取得するといった処理を作ることができます。

ラジオボタンの値を取得する例

HTMLのラジオボタンについては、こちらのページにまとめています。

選択中のラジオボタンの値を取得する

まずは、現在選択状態にある(チェックされている)ラジオボタンの値を取得してみます。

ラジオボタンのHTMLは以下の通りです。

初期値として「野菜」にチェックが入った状態にしています。

HTML

<label><input type="radio" name="category" value="fruits">くだもの</label>
<label><input type="radio" name="category" value="vegetable" checked>野菜</label>
<label><input type="radio" name="category" value="other">その他</label>
ラジオボタンの例

JavaScript側のポイントはセレクターに疑似クラス「:checked」を使うという点です。

ラジオボタンにチェックが付くのはひとつだけなので、こうすることで選択状態にあるラジオボタンだけを特定することができます。

あとは「value」プロパティを使って値を取得すれば完了です。

JavaScript

var checked = document.querySelector("input[name='category']:checked").value;
console.log(checked);//結果は「vegetable」

ラジオボタンが切り替わるたびに値を取得する

続いては、冒頭の例のようにchangeイベントを使ってユーザーがラジオボタンのチェックを切り替えるたびに、選択状態にあるラジオボタンの値を取得してみます。

(HTMLは先ほどと同じなので割愛します。)

JavaScript

var radio = document.querySelectorAll("input[name='category']");
radio.forEach(function(r){
    r.addEventListener("change",function(){
        var checked = document.querySelector("input[name='category']:checked").value;
        console.log(checked);
    });
});//end forEach

1行目querySelectorAllを使って対象のラジオボタン(name属性が「category」のもの)を全て取得します。

2行目3行目forEachを使ってループを作り、ラジオボタンひとつひとつに対してchangeイベントを設定していきます。

4行目changeイベント内に、選択中のラジオボタンの値を取得する処理を記述します。これにより、ラジオボタンのチェックが変更されるたびに、その時選択状態のラジオボタンの値が取得できます。

ラジオボタンの選択を切り替える

最後は、JavaScriptでラジオボタンの選択状態を動的に変更する方法です。

例として、クリアボタンが押されたら一番左のラジオボタンにチェックが切り替わるようにします。

ラジオボタンの選択状態を動的に変更する例

先ほどのHTMLにクリアボタンを追加します。onclick属性を使ってボタンがクリックされたらJSの関数が呼び出されるようにします。

HTML

<button type="button" onclick="radioClear()">クリア</button>

JavaScriptにラジオボタンにチェックを入れる処理を記述します。

選択状態にしたいラジオボタン(ここではfruits)をセレクターにし、「checked」プロパティを「true」にすると選択状態に切り替わります。

JavaScript

function radioClear(){
    var radio = document.querySelector("input[value='fruits']");
    radio.checked = true;
}

まとめ

以上が、JavaScriptでラジオボタンの値(value)を取得する方法です。

JSによるラジオボタンの操作はフォームだけでなく、ユーザーの操作に応じて表示の切り替えるといった動的な処理の作成などにも応用できます。

広告
広告

関連する記事

サムネイル

JSで入力値が英数字や半角かどうか即時文字チェックする【ma……

2024年10月02日
JavaScriptのmatch()は、正規表現を使って対象の文字列の中に一致するものがあるか検索できるメソッドです。このページではテキストボックスに入力された文字が数字や半角かどうかチェックする機能をmatchメソッドを使って実装する方法ついてご紹介します。
サムネイル

JSでHTMLのデータ属性を取得・更新する方法【datase……

2024年10月02日
JavaScriptのdatasetで要素のdata属性を操作する JavaScriptのdatasetは、HTML要素に設定されたデータ属性(data-*** […]
サムネイル

JSで大文字から小文字(小文字から大文字)へ変換する方法

2024年10月02日
JavaScriptで大文字と小文字を変換する JavaScriptを使った文字検索フォームを作るにあたり、大文字小文字どちらで入力されても良いよう、変換処理を […]
サムネイル

JSのclassList.toggleでクラスの付け外しを行……

2024年09月04日
classList.toggleとは? まず「classList」とは要素のクラス属性の情報を参照するプロパティで、「classList.add()」や「cla […]
サムネイル

JSで要素が特定のクラスを持つか調べる【classList.……

2024年09月04日
JSで要素が特定のクラスを持つか調べるには? JavaScriptで要素が特定のクラスを持つか調べるには「classList.contains」を使います。 「 […]
サムネイル

JSで文字列の中の任意の位置に別の文字を挿入する【slice……

2024年09月04日
JavaScriptに文字列の中の任意の位置に別の文字を挿入するにはslice()メソッドを利用します。sliceは特定の文字列の任意の位置から任意の文字数分を切り出すメソッドで、これを使って対象の文字列を一旦分解し、挿入したい文字と一緒新しい文字列としてくっつけ直します。