目次
チェックボックスとは
以下は実際のチェックボックスです。値を複数チェックできます。
チェックボックスのコード
<label><input type="checkbox" name="chk1" value="1" checked="checked" />red</label>
<label><input type="checkbox" name="chk1" value="2" />blue</label>
<label><input type="checkbox" name="chk1" value="3" />yellow</label>
チェックボックスは、選択を複数するときに使用します。チェックする箇所が四角になっています。
inputタグでtypeにcheckboxを指定します。
nameの値を同じにしてグループにします。
checked="checked"を記述すると最初からチェックされている状態になります。
<label>タグを使用すると、クリックできる範囲が四角の箇所のみでなく文字の箇所まで広がります。
選択された値はJavaScriptで取得できます。
value値を取得する
clickボタンを押すと、チェックされた項目の値(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文でも可です。
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文でも可です。
13行目は、各項目に対してcheckedをtrueにしてチェックを入れています。
19行目は、各項目に対してcheckedをfalseにしてチェックを外しています。
チェックされたか真偽値(true/false)で確認する
clickボタンを押した時、チェックされていた場合はtrue、チェックがない場合はfalseを表示します。
選択した値
上記サンプルのコードです。
<p>選択した値 <span id="span5"></span></p>
<form name="form5">
<label><input type="checkbox" name="chk3" 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" id ="c9" 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値を画面に表示します。
チェックされたら背景色を変える
チェックを入れると背景色が変わります。
上記サンプルのコードです。
<style>
#p9 {
width: 150px;
height: 50px;
background: #FF7F50;
}
</style>
<p id="p9">
<label><input type="checkbox" id="chk9"/>chk</label>
</p>
<script>
const chk9 = document.getElementById("chk9");
const p9 = document.getElementById("p9");
chk9.addEventListener("click", function (e) {
if (chk9.checked) {
p9.style.background = "#87CEFA";
} else {
p9.style.background = "#FF7F50";
}
});
</script>
関連の記事
JavaScript ラジオボタンの値を取得/設定する
JavaScript セレクトボックスの値を取得/設定するサンプル