iPentec.com / Articles / JavaScript / jQuery

ラジオボタンのチェック状態を取得する

jQueryでラジオボタンのチェック状態を取得するコードを紹介します。

概要

ラジオボタンのチェック状態を取得するには、セレクタでラジオボタンのname(グループ)を選択し、":checked"を付与してval()メソッドでチェックされているラジオボタンのvalueを取得できます。
別の方法として、.prop("checked")メソッドを呼び出してチェック状態を取得する方法もあります。またはセレクタに":checked"を付与してval()メソッドで取得することもできます。

補足

jQueryを利用せずに、JavaScriptのみでラジオボタンのチェック状態を取得する方法はこちらの記事を参照して下さい。

書式

$("セレクタ:checked").val()

jquery("セレクタ:checked").val()

または

$("セレクタ").prop("checked")

jquery("セレクタ").prop("checked")

とします。

コード

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script type="text/javascript" src="jquery-2.0.3.js"></script>
  <script type="text/javascript">
    function UpdateState() {
      value = $("input[name='RadioGroup01']:checked").val();

      switch (value) {
        case "item1":
          $("#output").html("要素1 が選択されています。");
          break;
        case "item2":
          $("#output").html("要素2 が選択されています。");
          break;
        case "item3":
          $("#output").html("要素3 が選択されています。");
          break;
        case "item4":
          $("#output").html("要素4 が選択されています。");
          break;
        case "item5":
          $("#output").html("要素5 が選択されています。");
          break;
        default:
          $("#output").html("予期せぬ値です。");
          break;
      }
    }

    $(document).ready(function () {
      UpdateState();
    })

    $(document).ready(function () {
      $("input[name='RadioGroup01']").click(function () {
        UpdateState();
      })
    })
  </script>

</head>
<body>
  <input type="radio" id="radio01" name="RadioGroup01" value="item1" checked><label for="radio01">要素1</label><br />
  <input type="radio" id="radio02" name="RadioGroup01" value="item2"><label for="radio02">要素2</label><br />
  <input type="radio" id="radio03" name="RadioGroup01" value="item3"><label for="radio03">要素3</label><br />
  <input type="radio" id="radio04" name="RadioGroup01" value="item4"><label for="radio04">要素4</label><br />
  <input type="radio" id="radio05" name="RadioGroup01" value="item5"><label for="radio05">要素5</label><br />
 
   <div id="output"></div>
</body>
</html>

解説

イベントハンドリング

$(document).ready(function () {
  UpdateState();
})

上記コードにより、ページが表示された際に、UpdateState()関数を呼び出します。

$(document).ready(function () {
  $("input[name='RadioGroup01']").click(function () {
    UpdateState();
  })
})

また、"RadioGroup01"のnameを持つinputタグ要素(この場合はラジオボタン)がクリックされた際にもUpdateState()関数を呼び出します。

UpdateState() 関数

function UpdateState() {
  value = $("input[name='RadioGroup01']:checked").val();

  switch (value) {
    case "item1":
      $("#output").html("要素1 が選択されています。");
      break;
    case "item2":
      $("#output").html("要素2 が選択されています。");
      break;
    case "item3":
      $("#output").html("要素3 が選択されています。");
      break;
    case "item4":
      $("#output").html("要素4 が選択されています。");
      break;
    case "item5":
      $("#output").html("要素5 が選択されています。");
      break;
    default:
      $("#output").html("予期せぬ値です。");
      break;
  }
}

ラジオボタンの選択状態を取得しメッセージを表示する関数です。

  value = $("input[name='RadioGroup01']:checked").val();

により、"RadioGroup01"のNameを持つラジオボタン群から選択されている要素を取得します。選択されている要素のvalueがval()メソッドにより取得できます。
"要素2"のラジオボタンが選択されている場合は、"item5"の値がval()メソッドの戻り値として返ります。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
ラジオボタンの下部に現在選択されているラジオボタンのメッセージが表示されます。

ラジオボタンの選択を変更すると下部のメッセージが変わります。

参考コード

「$("セレクタ").prop("checked")」を用いた場合のコード例です。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script type="text/javascript" src="jquery-2.0.3.js"></script>
  <script type="text/javascript">
    function UpdateState() {
      value = $("#radio01:checked").prop("checked");
      if (value == true) {
        $("#output").html("要素1 が選択されています。");
      }
      value = $("#radio02:checked").prop("checked");
      if (value == true) {
        $("#output").html("要素2 が選択されています。");
      }
      value = $("#radio03:checked").prop("checked");
      if (value == true) {
        $("#output").html("要素3 が選択されています。");
      }
      value = $("#radio04:checked").prop("checked");
      if (value == true) {
        $("#output").html("要素4 が選択されています。");
      }
      value = $("#radio05:checked").prop("checked");
      if (value == true) {
        $("#output").html("要素5 が選択されています。");
      }
    }

    $(document).ready(function () {
      UpdateState();
    })

    $(document).ready(function () {
      $("*[name='RadioGroup01']").click(function () {
        UpdateState();
      })
    })
  </script>

</head>
<body>
  <input type="radio" id="radio01" name="RadioGroup01" value="item1" checked><label for="radio01">要素1</label><br />
  <input type="radio" id="radio02" name="RadioGroup01" value="item2"><label for="radio02">要素2</label><br />
  <input type="radio" id="radio03" name="RadioGroup01" value="item3"><label for="radio03">要素3</label><br />
  <input type="radio" id="radio04" name="RadioGroup01" value="item4"><label for="radio04">要素4</label><br />
  <input type="radio" id="radio05" name="RadioGroup01" value="item5"><label for="radio05">要素5</label><br />
 
   <div id="output"></div>
</body>
</html>

著者

ジョニー

iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。

掲載日: 2014-01-23

目次

ラジオボタンのチェック状態を取得する

概要

書式

コード

解説

イベントハンドリング

UpdateState() 関数

実行結果

参考コード

関連するページ