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

JavaScriptでラジオボックスのチェック状態を取得します。

概要

JavaScriptでラジオボックスのチェック状態を取得するには、ラジオボックスのオブジェクトのcheckedプロパティを参照します。

checkedプロパティの値

値	意味
true	ラジオボックスはチェックされている
false	ラジオボックスはチェックされていない

フォーム内にあるラジオボックスを取得する場合

id属性で指定する場合

ラジオボタンのチェック状態をidで参照する場合は下記の記述になります。

document.forms.(参照するフォームのid).(参照するラジオボタンのid).checked

補足

document.(参照するフォームのname).(参照するラジオボタンのid).checkedの記述でもアクセスできます。

name属性で指定する場合

テキストボックスやチェックボックスのコントロールはnameから取得できますが、ラジオボタンの場合は同じラジオボタングループにする場合、nameの値を同じにするため、nameからの取得は利用できない状況が多いです。先に紹介したIDからチェック状態の取得をします。

実装例

コード

下記のHTMLファイルを作成します。

<!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" language="javascript">
    function onRadioButtonChange() {
      check1 = document.form1.Radio1.checked;
      check2 = document.form1.Radio2.checked;
      check3 = document.form1.Radio3.checked;

      target = document.getElementById("output");

      if (check1 == true) {
        target.innerHTML = "要素1がチェックされています。<br/>";
      }
      else if (check2 == true) {
        target.innerHTML = "要素2がチェックされています。<br/>";
      }
      else if (check3 == true) {
        target.innerHTML = "要素3がチェックされています。<br/>";
      }
    }
  </script>

</head>
<body>
  <form name="form1" action="">
    <input id="Radio1" name="RadioGroup1" type="radio" onchange="onRadioButtonChange();" />
      <label for="Radio1">ラジオボタン 要素1</label><br/>
    <input id="Radio2" name="RadioGroup1" type="radio" onchange="onRadioButtonChange();" />
      <label for="Radio2">ラジオボタン 要素2</label><br />
    <input id="Radio3" name="RadioGroup1" type="radio" onchange="onRadioButtonChange();" />
      <label for="Radio3">ラジオボタン 要素3</label><br />
  </form>

  <div id="output"></div>
</body>
</html>

解説

  <script type="text/javascript" language="javascript">
    function onRadioButtonChange() {
      check1 = document.form1.Radio1.checked;
      check2 = document.form1.Radio2.checked;
      check3 = document.form1.Radio3.checked;

      target = document.getElementById("output");

      if (check1 == true) {
        target.innerHTML = "要素1がチェックされています。<br/>";
      }
      else if (check2 == true) {
        target.innerHTML = "要素2がチェックされています。<br/>";
      }
      else if (check3 == true) {
        target.innerHTML = "要素3がチェックされています。<br/>";
      }
    }
  </script>

上記がラジオボタンのチェック状態が変更された際に実行するJavaScriptのコードです。ラジオボタンのチェック状態は、checkedプロパティで取得できます。ラジオボタンがチェックされていればtrueの値、チェックされていなければfalseの値となります。checkedプロパティを判定し、メッセージを"output"IDを持つ要素のHTMLとして表示します。
IDで指定した要素の位置へのテキスト表示はこちらの記事を参照してください。

  <form name="form1" action="">
    <input id="Checkbox1" type="checkbox" /><label for="Checkbox1">チェック項目1</label><br />
    <input id="Checkbox2" type="checkbox" /><label for="Checkbox2">チェック項目2</label><br />
    <input type="button" value="Exec" onclick="onButtonClick();" />
  </form>

上記がフォーム部のHTMLです。フォームでは2つのチェックボックスと1つのボタンを配置しています。ボタンのonclickイベントでonBVuttonCLick()関数を実行します。

実行結果

上記のHTMLファイルを表示します。下図の画面が表示されます。

ラジオボタンをクリックして選択します。選択されると、ラジオボタンの下部に要素が選択された旨のメッセージが表示されます。

別のラジオボタンをクリックするとメッセージも変化します。

GetElementById で取得する場合

DOMを利用して、GetElementByIdでラジオボタンのチェック状態を取得することができます。GetElementByIdを利用した場合は、ラジオボタンがフォーム内に存在していない状態でも取得できます。

書式

(ラジオボタンのDOMオブジェクト).checked

実装例

コード

下記のHTMLファイルを記述します。

<!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" language="javascript">
    function onRadioButtonChange() {
      radiobtn1 = document.getElementById("Radio1");
      radiobtn2 = document.getElementById("Radio2");
      radiobtn3 = document.getElementById("Radio3");

      target = document.getElementById("output");

      if (radiobtn1.checked == true) {
        target.innerHTML = "要素1がチェックされています。<br/>";
      }
      else if (radiobtn2.checked == true) {
        target.innerHTML = "要素2がチェックされています。<br/>";
      }
      else if (radiobtn3.checked == true) {
        target.innerHTML = "要素3がチェックされています。<br/>";
      }
    }
  </script>

</head>
<body>
  <input id="Radio1" name="RadioGroup1" type="radio" onchange="onRadioButtonChange();" /><label for="Radio1">ラジオボタン 要素1</label><br/>
  <input id="Radio2" name="RadioGroup1" type="radio" onchange="onRadioButtonChange();" /><label for="Radio2">ラジオボタン 要素2</label><br />
  <input id="Radio3" name="RadioGroup1" type="radio" onchange="onRadioButtonChange();" /><label for="Radio3">ラジオボタン 要素3</label><br />
  <div id="output"></div>
</body>
</html>

解説

ラジオボタンをクリックし、選択状態が変更されると、onRadioButtonChange()関数が呼び出されます。関数内では、GetElementByIdメソッドを呼び出し、Radio1,Radio2,Radio3のラジオボタンオブジェクトを取得します。チェック状態は、ラジオボタンオブジェクトのcheckedプロパティの値で判別します。ラジオボタンのチェック状態に応じたメッセージを画面に表示します。