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

JavaScriptを使用してチェックボックスのON/OFF状態を取得する方法について解説します。また、ラジオボタン・チェックボックスの値を設定する方法を解説します。

JavaScriptでチェックボックスの値を取得するにはどうしたらいいですか？

「checked」プロパティを使用すると値を取得できたり、設定することができます。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

checkedプロパティを使ったチェックボックスの値の取得

　HTMLのチェックボックスの値を取得するにはcheckedプロパティを使います。checkedプロパティはチェックボックスがONの状態かどうかを表します。

checkedプロパティは真偽値であり、ONの場合はtrue、OFFの場合はfalseを返します。

下記のようなHTMLのチェックボックスがあった場合、値を取得する方法を示します。

<input type="checkbox" id="checkbox1">

checkedプロパティを使って値を取得する方法は次のようになります。

var checkbox = document.getElementById("checkbox1");
var isChecked = checkbox.checked;

if (isChecked) {
  console.log("チェックされています");
} else {
  console.log("チェックされていません");
}

このようにcheckedプロパティを使うことで、JavaScriptを使ってチェックボックスの値を取得することができます。

ラジオボタン・チェックボックスの値を設定する方法

checkedプロパティを利用するとラジオボタンやチェックボックスの値を設定することができます。

ラジオボタンの値を設定する

ラジオボタンは複数の中から1つだけ選ぶことができるフォーム要素です。ラジオボタンの値を設定するには、checkedプロパティを使います。

例えば以下のように記述することで、対象のラジオボタンが選択された状態になります。

document.getElementById(“ラジオボタンのID”).checked = true;

以下のサンプルでは、JavaScriptではラジオボタンの「radio1」をチェック状態に設定しています。

<input type="radio" id="radio1" name="radio">
<label for="radio1">ラジオボタン1</label>

<input type="radio" id="radio2" name="radio">
<label for="radio2">ラジオボタン2</label>

<script>
  // ラジオボタン1を選択状態にする
  document.getElementById("radio1").checked = true;
</script>

チェックボックスの値を設定する

チェックボックスは複数の中から複数選ぶことができるフォーム要素です。

チェックボックスの値を設定するには、checkedプロパティを使います。

例えば以下のように記述することで、対象のチェックボックスが選択された状態になります。

document.getElementById(“チェックボックスのID”).checked = true;

以下のサンプルでは、JavaScriptでチェックボックスの「check1」をチェック状態に設定しています。

<input type="checkbox" id="check1">
<label for="check1">チェックボックス1</label>

<input type="checkbox" id="check2">
<label for="check2">チェックボックス2</label>

<script>
  // チェックボックス1を選択状態にする
  document.getElementById("check1").checked = true;
</script>

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。