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

nas2017/06/09

目次

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

ラジオボタンとは

以下は実際のラジオボタンです。値を1つチェックできます。

ラジオボタンのコード

<label><input type="radio" name="chk" value="1" checked="checked" />red</label>
<label><input type="radio" name="chk" value="2" />blue</label>
<label><input type="radio" name="chk" value="3" />yellow</label>

 

ラジオボタンは1つのみ選択するときに使用します。チェックする箇所が丸になっています。

inputタグでtypeにradioを指定します。

nameの値を同じにしてグループにします

<label>タグを使用すると、クリックできる範囲が丸の箇所のみでなく文字の箇所まで広がります。

HTML labelタグでクリックできる範囲を広げる

選択された値はJavaScriptで取得できます。

 

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 セレクトボックスの値を取得/設定するサンプル

△上に戻る