[JavaScript] jQueryでラジオボタンのチェック状態を取得する

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

概要

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

書式

$("セレクタ: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について
iPentec all rights reserverd. (ISDC)