jQueryでradioの値を取得したりチェックする方法

ラジオボタン(radio)は一覧の中から1件の項目を選択する場合に使います。

1つ選択されている状態で別のものを選択したら、前に選択されていたものが消え新しく選択されたものにチェックが入ります。

○男性 ○女性

のように性別を選択してもらう場合とかに使います。

このラジオボタンの現在チェックされているものが何かをjQueryを使って取得したり、jQueryを使ってチェックする方法を紹介します。

jQueryでチェックされたradioの値を取得する方法

チェックされたラジオボタンの値を取得するには、セレクタで指定した要素に :checked を付与します。

次のサンプルは、「実行」ボタンを押すとラジオボタン(name1)の値を取得し表示するものです。

男をチェックしていればラジオボタンのvalueの val1 が表示されます。

女をチェックしていればラジオボタンのvalueの val2 が表示されます。

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js?ver=1.12.2'></script>
<script type="text/javascript">
  $(function(){
    $('#btn').click(function() {
      var v = $('input[name=name1]:checked').val();
      alert(v);
    });
  });
</script>
<input type="radio" name="name1" id="id1" value="val1">男
<input type="radio" name="name1" id="id2" value="val2">女
<input type="button" value="実行" id="btn">

$(function(){

$('#btn').click(function() {

var v = $('input[name=name1]:checked').val();

alert(v);

});

</script>

<input type="radio" name="name1" id="id1" value="val1">男

<input type="radio" name="name1" id="id2" value="val2">女

ちなみに初期表示時にはチェックされていない状態になります。

その場合は undefined が表示されます。

jQueryでradioにチェックをする

jQueryを使ってラジオボタンにチェックを入れる方法です。

今回は実行ボタンを押したとき、チェックされていなければチェックし、チェックされている場合には逆のラジオボタンにチェックをする。

ラジオボタンは同じnameの中で1件しかチェックできない仕様なので、チェックされていない方にチェックをすればもう一方のチェックされている方のチェックは自動的に外れます。

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js?ver=1.12.2'></script>
<script type="text/javascript">
  $(function(){
    $('#btn').click(function() {
      var v = $('input[name=name1]:checked').val();
      if (v == 'val1') {
        $('#id2').prop("checked", true);
      } else {
        $('#id1').prop("checked", true);
      }
    });
  });
</script>
<input type="radio" name="name1" id="id1" value="val1">男
<input type="radio" name="name1" id="id2" value="val2">女
<input type="button" value="実行" id="btn">