JavaScript チェックボックスの値を取得/設定する

JavaScriptでチェックボックス(checkbox)の値を取得/設定するサンプルです。

checkboxが複数 value値を取得する
  チェックを入れる/外す(全選択/全解除)
checkboxが1つ チェックされたか真偽値(true/false)で確認する
  チェックを入れる/外す
イベント チェックされたらvalue値を取得(イベントリスナを使用)

value値を取得する

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

選択した値

 

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

<p>選択した値 <span id="span1"></span></p>
<form name="form1">
  <label><input type="checkbox" name="chk1" value="a" checked />a</label>
  <label><input type="checkbox" name="chk1" value="b" />b</label>
  <label><input type="checkbox" name="chk1" value="c" />c</label>
</form>
<input type="button" value="click" onclick="clickBtn1()" />

<script>
  function clickBtn1() {
    const arr = [];
    const chk1 = document.form1.chk1;

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

3~5行目は、チェックボックスです。
12行目は、2行目のフォームのname「form1」とチェックボックスのname「chk1」で対象を特定(3-5行目)しています。
14行目は、チェックボックスの数分ループを回しています。ループはfor-of文でも可です(IE11はfor-of文に対応していなので不可)。
15行目は、チェックボックスのチェックがついていた場合、if文のcheckedの判定がtrueになります。
16行目は、チェックボックスのvalue値(a,b,c)を配列にセットしています。

 

getElementsByNameで取得する場合

<p>選択した値 <span id="span1"></span></p>
<label><input type="checkbox" name="chk1" value="a" checked />a</label>
<label><input type="checkbox" name="chk1" value="b" />b</label>
<label><input type="checkbox" name="chk1" value="c" />c</label>
<input type="button" value="click" onclick="clickBtn1()" />
<script>
  function clickBtn1() {
    const arr = [];
    const chk1 = document.getElementsByName("chk1");

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

9行目は、getElementsByNameメソッドでチェックボックスのname「chk1」を特定(2~4行目)しています。

 

チェックを入れる/外す(全選択/全解除)

click1を押すとチェックが全選択になります。
click2を押すと全てのチェックが外れます。

 

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

<form name="form3">
  <label><input type="checkbox" name="chk2" value="a" checked />a</label>
  <label><input type="checkbox" name="chk2" value="b" />b</label>
  <label><input type="checkbox" name="chk2" value="c" />c</label>
</form>
<input type="button" value="click1" onclick="clickBtn3()" />
<input type="button" value="click2" onclick="clickBtn4()" />

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

12行目は、チェックボックスの数分ループを回しています。ループはfor-of文でも可です(IE11はfor-of文に対応していなので不可)。
13行目は、各項目に対してcheckedをtrueにしてチェックを入れています。
19行目は、各項目に対してcheckedをfalseにしてチェックを外しています。

 

チェックされたか真偽値(true/false)で確認する

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

選択した値

 

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

<p>選択した値 <span id="span5"></span></p>
<form name="form5">
  <label><input type="checkbox" name="chk3" value="a" checked />a</label>
</form>
<input type="button" value="click" onclick="clickBtn5()" />

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

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

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

getElementByIdで取得する場合

<p>状態: <span id="span5"></span></p>
<label><input type="checkbox" name="chk3" id ="c9" value="a" checked />a</label>
<input type="button" value="click" onclick="clickBtn5()" />

<script>
  function clickBtn5() {
    const chk3 = document.getElementById("c9");

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

2行目は、チェックボックスです。id ="c9"があります。
7行目は、getElementByIdメソッドでチェックボックスを取得しています。
9行目は、チェックボックスのチェックがついていた場合、if文のcheckedの判定がtrueになります。

 

チェックを入れる/外す

click1を押すとチェックボタンにチェックが入ります。
click2を押すとチェックボタンのチェックが外れます。

 

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

<form name="form6">
  <label><input type="checkbox" name="chk4" value="a" />a</label>
</form>
<input type="button" value="click1" onclick="clickBtn6()" />
<input type="button" value="click2" onclick="clickBtn7()" />

<script>
  function clickBtn6() {
    const chk4 = document.form6.chk4;
    chk4.checked = true;
  }
  function clickBtn7() {
    const chk4 = document.form6.chk4;
    chk4.checked = false;
  }
</script>

2行目は、チェックボックスです。
10行目はtrueを指定し、14行目はfalseを指定しています。

 

チェックされたらvalue値を取得(イベントリスナを使用)

チェックを入れるとvalue値を取得して画面に表示します。

選択した値

 

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

<p>選択した値 <span id="span9"></span></p>
<label><input type="checkbox" id="chk5" value="a" />a</label>

<script>
  const chk5 = document.getElementById("chk5");
  const sp9 = document.getElementById("span9");

  chk5.addEventListener("click", function (e) {
    if (chk5.checked) {
      sp9.textContent = chk5.value;
    } else {
      sp9.textContent = "";
    }
  });
</script>

2行目は、チェックボックスです。
8行目は、addEventListenerメソッドです。画面表示時にイベントリスナを登録をしています。
1つめの引数は"click"のイベントです。clickされたときに実行されます。

 

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

上記コードをイベントリスナからonchangeに変えた場合です。

<p>選択した値 <span id="span9"></span></p>
<label><input type="checkbox" id="chk5" value="a" onchange="chk5(this.value)"/>a</label>

<script>
  function chk5(val) {
    const chk5 = document.getElementById("chk5");
    const sp9 = document.getElementById("span9");

    if (chk5.checked) {
      sp9.textContent = val;
    } else {
      sp9.textContent = "";
    }
  }
</script>

2行目は、チェックボックスです。
チェックを入れるとonchangeのイベントハンドラで5行目の関数を実行します。
2行目のthis.valueは、aを指します。5行目に引数として渡します。
10行目は、取得したvalue値を画面に表示します。

関連の記事

JavaScript ラジオボタンの値を取得/設定する
JavaScript セレクトボックスの値を取得/設定するサンプル

△上に戻る