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

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

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

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

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>

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

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

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

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

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

「checked」プロパティを使えば簡単にチェックボックスの値を取得できました！

JavaScriptを使ってチェックボックスなどの操作をする際には常にユーザーのアクションを考慮することが大切です。ユーザーが意図しない操作を引き起こさないように注意することが大切です。