JavaScript ラジオボタンの値を取得/設定する

JavaScriptのラジオボタンの値を取得/設定するサンプルです。

確認環境
・Google Chrome/IE11

目次

radioボタンが複数 value値を取得する
  チェックをつける/外す
radioボタン1つ チェックされたか真偽値で確認する
イベントハンドラ チェックされたらvalue値を取得する(onchangeを使用)

value値を取得する

ボタンを押した時、チェックされた項目のvalue値を取得して表示します。

選択した色

 

上記サンプルのコードです。

<p>選択した色 <span id="span1"></span></p>
<form name="form1">
  <input type="radio" name="color1" value="red" checked /> 赤
  <input type="radio" name="color1" value="blue" /> 青
  <input type="radio" name="color1" value="yellow" /> 黄
</form>
<input type="button" value="ボタン" onclick="clickBtn1()" />

<script>
  function clickBtn1() {
    let str = "";
    const color1 = document.form1.color1;

    for (let i = 0; i < color1.length; i++) {
      if (color1[i].checked) {//(color1[i].checked === true)と同じ
        str = color1[i].value;
        break;
      }
    }
    document.getElementById("span1").textContent = str;
  }
</script>

3~5行目は、ラジオボタンです。
12行目は、フォームのname「form1」とラジオボタンのname「color1」で対象を特定(3~5行目)しています。
14行目は、ラジオボタンの数を取得してループを回しています。ループはfor-of文でも可です(IE11はfor-of文に未対応のため不可)。
15行目は、ラジオボタンのチェックがついていた場合、if文のcheckedの判定がtrueになります。
16行目は、ラジオボタンのvalue値(red,blue,yellow)を変数にセットしています。

value値を取得する(formのidを指定する場合)

<p>選択した色 <span id="span2"></span></p>
<form id="form2">
  <input type="radio" name="color2" value="red" checked /> 赤
  <input type="radio" name="color2" value="blue" /> 青
  <input type="radio" name="color2" value="yellow" /> 黄
</form>
<input type="button" value="ボタン" onclick="clickBtn2()" />
<script>
  function clickBtn2() {
    let str = "";
    const f1 = document.getElementById("form2");		
    const color2 = f1.color2;

    for (let i = 0; i < color2.length; i++) {
      if (color2[i].checked) {//(color2[i].checked === true)と同じ
        str = color2[i].value;
        break;
      }
    }
    document.getElementById("span2").textContent = str;
  }
</script>

11行目は、getElementByIdメソッドでformのid「form2」を特定しています。

 

チェックをつける/外す

ボタン1を押すとラジオボタンの青にチェックが入ります。
ボタン2を押すとラジオボタンのチェックが外れます。

 

上記サンプルのコードです。

<form name="form3">
  <input type="radio" name="color3" value="red" checked /> 赤
  <input type="radio" name="color3" value="blue" /> 青
  <input type="radio" name="color3" value="yellow" /> 黄
</form>
<input type="button" value="ボタン1" onclick="clickBtn3()" />
<input type="button" value="ボタン2" onclick="clickBtn4()" />

<script>
  function clickBtn3() {
    const color3 = document.form3.color3;
    color3[2].checked = true;
  }
  function clickBtn4() {
    const color3 = document.form3.color3;
    for (let i = 0; i < color3.length; i++) {
      color3[i].checked = false;
    }
  }
</script>

2~4行目は、ラジオボタンです。
11行目は、フォームのname「form3」とラジオボタンのname「color3」で対象を特定(2-4行目)しています。
12行目は、checkedにtrueを設定しています。
16行目は、ラジオボタンの数分ループを回しています。ループはfor-of文でも可です(IE11はfor-of文に対応していなので不可)。
17行目は、各項目に対してcheckedをfalseにしてチェックを外しています。

 

チェックされたか真偽値で確認する

ボタンを押した時、ラジオボタンがチェックされていた場合はtrue、チェックがない場合はfalseを表示します。

選択した色

 

上記サンプルのコードです。

<p>選択した色 <span id="span5"></span></p>
<form name="form5">
  <input type="radio" name="color5" value="red" checked> 赤
</form>
<input type="button" value="ボタン" onclick="clickBtn5()" />
<input type="button" value="チェックを外す" onclick="clickBtn6()" />

<script>
  function clickBtn5() {
    const color1 = document.form5.color5;

    if (color1.checked) { //(color1[i].checked === true)と同じ
      document.getElementById("span5").textContent = "trueです";
    } else {
      document.getElementById("span5").textContent = "falseです";
    }
  }
  function clickBtn6() {
    document.form5.color5.checked = false;
  }
</script>

3行目は、ラジオボタンです。
12行目は、チェックの状態を真偽値で判定します。チェックされていればtrue、チェックされていない場合はfalseを返します。

 

チェックされたか真偽値で確認する(ラジオボタンのidを指定する場合)

<p>選択した色 <span id="span7"></span></p>
<input type="radio" id="color6" value="red" checked /> 赤
<input type="button" value="ボタン" onclick="clickBtn7()" />
<input type="button" value="チェックを外す" onclick="clickBtn8()" />

<script>
  function clickBtn7() {
    const color1 = document.getElementById("color6");

    if (color1.checked) {//(color1[i].checked === true)と同じ
      document.getElementById("span7").textContent = "trueです";
    } else {
      document.getElementById("span7").textContent = "falseです";
    }
  }
  function clickBtn8() {
    document.getElementById("color6").checked = false;
  }
</script>

8行目は、getElementByIdメソッドでラジオボタンを取得しています。

 

チェックされたらvalue値を取得する(onchangeを使用)

ラジオボタンをチェックするとvalue値を取得して表示します。

選択した色

 

上記サンプルのコードです。

<p>選択した色 <span id="span8"></span></p>
<form name="form8"></form>
<input type="radio" name="c8" value="red" onchange="chk1(this.value)" checked> 赤
<input type="radio" name="c8" value="blue" onchange="chk1(this.value)" > 青
</form>

<script>
  function chk1(val) {
    document.getElementById("span8").textContent = val;
  }
</script>

3,4行目は、ラジオボタンです。
チェックを入れるとonchangeのイベントハンドラで8行目の関数を実行します。
3行目のthis.valueは、redを指します。8行目に引数として渡します。
4行目のthis.valueは、blueを指します。8行目に引数として渡します。
9行目は、取得したvalue値を画面に表示します。

関連の記事

JavaScript チェックボックスの値を取得/設定する
JavaScript セレクトボックスの値を取得/設定するサンプル
JavaScript hiddenの値を取得/設定する
JavaScript テキストボックスの値を取得/設定する
JavaScript テキストエリアの値を取得/設定する

△上に戻る