グループ化したラジオボタンから選択された値を取得する方法【JS, jQuery】

<form id="sweetGroup">
  <label>
    <input name="sweet" type="radio" value="c">
    カップケーキ（Cupcake）
  </label><br>
  <label>
    <input name="sweet" type="radio" value="d"> 
    ドーナッツ（Donut）
  </label><br>
  <label>
    <input name="sweet" type="radio" value="e">
    エクレア（Eclair）
  </label><br>
</form>

<div id="showSweet">
  <!-- ここに選択値とか表示 -->
</div>

<label>

カップケーキ（Cupcake）

</label><br>

<label>

ドーナッツ（Donut）

</label><br>

<label>

エクレア（Eclair）

</label><br>

</form>

</div>

ここでは name="sweet" を持つラジオグループを作成してます。

▼ 何の変哲もないラジオボタングループ

ちなみにラジオボタンを label で囲んでるのは、テキストも含めて選択可能にするためです。

２．ラジオボタンの選択値を取得するコード書く

ここからが肝心な所。そのコード例は次みたいな感じです。

window.addEventListener('load', function(){
  const radioGroup = document.getElementById('sweetGroup');
  
  /// ラジオのクリックイベントを取得
  radioGroup.addEventListener('click', function(){
    /// 選択された値とか要素内テキスト取得
    var radio = document.querySelector('[name="sweet"]:checked');
    var val = radio.value;
    var text = radio.parentElement.innerText;
    
    /// ラジオグループ下にそれらを表示
    var elemShowSweet = document.getElementById('showSweet');
    elemShowSweet.innerHTML = 'value : ' + val;
    elemShowSweet.innerHTML += '<br>';
    elemShowSweet.innerHTML += 'sweet : ' + text;
  });
});

window.addEventListener('load', function(){

const radioGroup = document.getElementById('sweetGroup');

/// ラジオのクリックイベントを取得

radioGroup.addEventListener('click', function(){

/// 選択された値とか要素内テキスト取得

var radio = document.querySelector('[name="sweet"]:checked');

var val = radio.value;

var text = radio.parentElement.innerText;

/// ラジオグループ下にそれらを表示

var elemShowSweet = document.getElementById('showSweet');

elemShowSweet.innerHTML = 'value : ' + val;

elemShowSweet.innerHTML += '<br>';

elemShowSweet.innerHTML += 'sweet : ' + text;

});

大事なポイントは次の２つ

選択されたラジオを querySelector で取得
このコードの querySelector('[name="sweet"]:checked') の部分。JavaScriptでもこのメソッドを使えば jQueryライクに要素取得ができる
ラジオ要素から選択された値を取得
セレクタから選択されたラジオボタンの値は radio.value のように取得すればOK

あとはラジオグループの下に用意したdivのなかに結果を表示してるだけ

ちなみにこのコードを動かしたときの様子がコチラ

ラジオボタンの選択状態が変わったら、その下に値（value）と要素テキストが表示されるみたいな処理。期待通りに動いてくれました。

今まで jQuery ばっかり使ってきたから、こういう純粋なJSだけの書き方はあまり慣れない・・・
でもJSだけしか使えない場面では、こういうコードが役に立つかもしれないです。

jQueryで選択値を取得するのはもっと簡単

ついでにjQueryでラジオの選択値をゲットする方法も紹介

やっぱり純粋なJS使うより、jQuery使う方が楽です。その手順は次の通り

１．まず先ほどと同じくラジオグループ作成

<form id="sweetGroup">
  <label>
    <input name="sweet" type="radio" value="c">
    カップケーキ（Cupcake）
  </label><br>
  (中略...)
</form>

<div id="showSweet">
  <!-- ここに選択値とか表示 -->
</div>

<label>

カップケーキ（Cupcake）

</label><br>

(中略...)

</form>

</div>

２．jQueryで選択値を取得するコードを書く

window.addEventListener('load', function(){
  /// ラジオボタンの変化を監視する
  $('[name="sweet"]').on('change', function(){
    /// 選択された値とか要素内テキスト取得
    var radio = $(this);
    var val = radio.val();
    var text = radio.closest('label').text();
    
    /// ラジオグループの下にそれらを表示
    $('#showSweet')
      .html('value : '+val+'<br>sweet : ' + text);
  });
});

window.addEventListener('load', function(){

/// ラジオボタンの変化を監視する

$('[name="sweet"]').on('change', function(){

/// 選択された値とか要素内テキスト取得

var radio = $(this);

var val = radio.val();

var text = radio.closest('label').text();

/// ラジオグループの下にそれらを表示

$('#showSweet')

.html('value : '+val+'<br>sweet : ' + text);

});

上コードでやってることは・・・

$('[name="sweet"]') でラジオボタン取得
それらに対して change リスナーを設定
選択状態が変化したら任意コード実行

こういう処理をしてるだけです。

やっぱり jQuery を使う方が冗長性が少ないし、スマートな気がします。

やり方を知ってないとやっぱり戸惑う

以上、グループ化されたラジオの選択値を取得するやり方でした。

jQueryでのやり方は知っていたけど、純粋なJSでのやり方は今まで知りませんでした。

なので忘れないようにメモしておこうと思います。ではでは ($・・)/~~~

グループ化したラジオボタンから選択された値を取得する方法

JavaScriptのみで選択値を取得するには・・・

jQueryで選択値を取得するのはもっと簡単

やり方を知ってないとやっぱり戸惑う

関連記事

プロフィール

人気記事

検索してみる