概要: このチュートリアルでは、JavaScriptを使用してチェックボックスがチェックされているかどうかをテストする方法、選択されたチェックボックスの値を取得する方法、およびすべてのチェックボックスを選択/選択解除する方法を学習します。
HTMLチェックボックスの作成
チェックボックスを作成するには、次のようにtypeがcheckboxの<input>要素を使用します。
<input type="checkbox" id="accept"> Accept Code language: HTML, XML (xml)ユーザビリティとアクセシビリティを向上させるために、常にチェックボックスをラベルに関連付けることをお勧めします。これにより、ラベルをクリックするとチェックボックスのオン/オフも切り替わります。
<label for="accept">
<input type="checkbox" id="accept" name="accept" value="yes"> Accept
</label>Code language: HTML, XML (xml)または
<input type="checkbox" id="accept" name="accept" value="yes">
<label for="accept"> Accept </label>Code language: HTML, XML (xml)ラベルのfor属性の値は、チェックボックスのidと一致する必要があることに注意してください。
以下は機能しますが、悪い習慣なので避けるべきです。
<input type="checkbox" id="accept" name="accept" value="yes"> AcceptCode language: HTML, XML (xml)チェックボックスがチェックされているかどうかの確認
チェックボックスには、チェック済みと未チェックの2つの状態があります。
チェックボックスの状態を取得するには、次の手順に従います。
- まず、
getElementById()やquerySelector()などのDOMメソッドを使用してチェックボックスを選択します。 - 次に、チェックボックス要素の
checkedプロパティにアクセスします。checkedプロパティがtrueの場合、チェックボックスはチェックされています。それ以外の場合はチェックされていません。
次の例を参照してください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkbox</title>
</head>
<body>
<label for="accept">
<input type="checkbox" id="accept" name="accept" value="yes"> Accept
</label>
<script>
const cb = document.querySelector('#accept');
console.log(cb.checked); // false
</script>
</body>
</html>Code language: HTML, XML (xml)この例では
最初に、HTMLチェックボックス要素を作成します。
<label for="accept">
<input type="checkbox" id="accept" name="accept" value="yes"> Accept
</label>Code language: HTML, XML (xml)次に、id #acceptでチェックボックスを選択し、checkedプロパティを調べます。
const cb = document.querySelector('#accept');
console.log(cb.checked);Code language: JavaScript (javascript)チェックボックスが未チェックであるため、コンソールにfalseが表示されます。
falseCode language: JavaScript (javascript)別の例を検討してください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkbox</title>
</head>
<body>
<label for="accept">
<input type="checkbox" id="accept" name="accept" value="yes"> Accept
</label>
<script>
const checked = document.querySelector('#accept:checked') !== null;
console.log(checked); // false
</script>
</body>
</html>Code language: HTML, XML (xml)この例では、セレクター#accept:checkedは、idが#acceptで属性checkedを持つ要素を選択します。たとえば、次の要素と一致します。
<input type="checkbox" id="accept" checked> AcceptCode language: HTML, XML (xml)ただし、次の要素とは一致しません。
<input type="checkbox" id="accept"> AcceptCode language: HTML, XML (xml)したがって、id #acceptを持つチェックボックス要素がチェックされている場合、document.querySelector()はそれを返します。コンソールウィンドウでは、チェックボックスが未チェックであるため、値falseが表示されます。
falseCode language: JavaScript (javascript)チェックボックスの値の取得
次のページには、チェックボックスとボタンが表示されます。ボタンをクリックすると、コンソールウィンドウにチェックボックスの値が表示されます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkbox</title>
</head>
<body>
<label for="accept">
<input type="checkbox" id="accept" name="accept"> Accept
</label>
<button id="btn">Submit</button>
<script>
const cb = document.querySelector('#accept');
const btn = document.querySelector('#btn');
btn.onclick = () => {
alert(cb.value);
};
</script>
</body>
</html>Code language: HTML, XML (xml)チェックボックスのvalue属性を取得すると、チェックボックスがオンかオフかに関係なく、常に'on'文字列が取得されます。
複数選択されたチェックボックスの値の取得
次のページには3つのチェックボックスが表示されます。1つ以上のチェックボックスを選択してボタンをクリックすると、選択したチェックボックスの値が表示されます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkboxes</title>
</head>
<body>
<p>Select your favorite colors:</p>
<label for="c1"> <input type="checkbox" name="color" value="red" id="c1">Red</label>
<label for="c2"><input type="checkbox" name="color" value="green" id="c2"> Green</label>
<label for="c3"><input type="checkbox" name="color" value="blue" id="c3">Blue</label>
<p>
<button id="btn">Get Selected Colors</button>
</p>
<script>
const btn = document.querySelector('#btn');
btn.addEventListener('click', (event) => {
let checkboxes = document.querySelectorAll('input[name="color"]:checked');
let values = [];
checkboxes.forEach((checkbox) => {
values.push(checkbox.value);
});
alert(values);
});
</script>
</body>
</html>Code language: HTML, XML (xml)仕組み。
HTMLでは、同じ名前（color）を持つが値が異なる3つのチェックボックス要素を作成します。
<label for="c1"><input type="checkbox" name="color" value="red" id="c1">Red</label>
<label for="c2"><input type="checkbox" name="color" value="green" id="c2">Green</label>
<label for="c3"><input type="checkbox" name="color" value="blue" id="c3">Blue</label>Code language: HTML, XML (xml)JavaScriptでは
最初に、ボタンにクリックイベントハンドラーを追加します。
const btn = document.querySelector('#btn');
btn.addEventListener('click', (event) => {
// ...
}); Code language: JavaScript (javascript)次に、クリックイベントハンドラー内のdocument.querySelectorAll()メソッドを使用して、選択されたチェックボックスを選択します。
let checkboxes = document.querySelectorAll('input[name="color"]:checked');Code language: JavaScript (javascript)3番目に、選択されたチェックボックスの値を配列にプッシュします。
let values = [];
checkboxes.forEach((checkbox) => {
values.push(checkbox.value);
});
alert(values);Code language: JavaScript (javascript)デモ
すべてのチェックボックスをチェック/チェック解除
次のページには、3つのチェックボックスとボタンがあります。ボタンをクリックすると、チェックボックスがチェックされている場合はチェックが外され、逆の場合も同様です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Check/uncheck checkboxes</title>
</head>
<body>
<p>
<button id="btn">Check / Uncheck All</button>
</p>
<label for="c1"><input type="checkbox" name="color" value="red" id="c1"> Red</label>
<label for="c2"><input type="checkbox" name="color" value="green" id="c2"> Green</label>
<label for="c3"> <input type="checkbox" name="color" value="blue" id="c3">Blue</label>
<script>
function check(checked = true) {
const checkboxes = document.querySelectorAll('input[name="color"]');
checkboxes.forEach((checkbox) => {
checkbox.checked = checked;
});
}
function checkAll() {
select();
this.onclick = uncheckAll;
}
function uncheckAll() {
select(false);
this.onclick = checkAll;
}
const btn = document.querySelector('#btn');
btn.onclick = checkAll;
</script>
</body>
</html>Code language: HTML, XML (xml)仕組み
最初に、名前が"color"のすべてのチェックボックスをチェックまたはチェック解除するcheck()関数を定義します。
function check(checked = true) {
const checkboxes = document.querySelectorAll('input[name="color"]');
checkboxes.forEach((checkbox) => {
checkbox.checked = checked;
});
}Code language: JavaScript (javascript)ボタンをクリックすると、すべてのチェックボックスがチェックされます。そして。もう一度ボタンをクリックすると、すべてのチェックボックスのチェックが外れるはずです。この切り替えを行うには、クリックイベントが発生するたびにクリックイベントハンドラーを再割り当てする必要があります。
次に、#btnボタンを選択し、ボタンのonclickプロパティにcheckAll()関数を割り当てます。
const btn = document.querySelector('#btn');
btn.onclick = checkAll;Code language: JavaScript (javascript)3番目に、すべてのチェックボックスをチェックするcheckAll()関数を定義します。
function checkAll() {
check();
this.onclick = uncheckAll;
}
Code language: JavaScript (javascript)最後に、すべてのチェックボックスのチェックを外すuncheckAll()関数を定義します。
function uncheckAll() {
check(false);
this.onclick = checkAll;
}Code language: JavaScript (javascript)デモ
チェックボックスの動的な作成
次の例は、JavaScriptを使用してチェックボックスを動的に作成する方法を示しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkboxes</title>
</head>
<body>
<div id="root"></div>
<script>
const colors = ["Red","Green","Blue"];
colors.forEach((color)=>{
// generate id
const id = `color-${color}`;
// create a label
const label = document.createElement('label');
label.setAttribute("for", id);
// create a checkbox
const checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "color";
checkbox.value = color;
checkbox.id = id;
// place the checkbox inside a label
label.appendChild(checkbox);
// create text node
label.appendChild(document.createTextNode(color));
// add the label to the root
document.querySelector("#root").appendChild(label);
});
</script>
</body>
</html>Code language: HTML, XML (xml)出力
<div class="output-cont"><div class="output">
<iframe height="250px" src="https://javascripttutorial.dokyumento.jp/sample/dom/checkbox/checkbox-dynamic.html"></iframe>
</div></div>Code language: HTML, XML (xml)仕組み。
最初に、3つの文字列で構成される配列を定義します。実際には、API呼び出しの結果から得られる配列がある場合があります。
const colors = ["Red","Green","Blue"];Code language: JavaScript (javascript)次に、配列要素を反復処理し、
1）各チェックボックスの一意のidを生成します。
const id = `color-${color}`;Code language: JavaScript (javascript)2）ラベルを作成し、for属性にidを割り当てます。
const label = document.createElement('label');
label.setAttribute("for", id);Code language: JavaScript (javascript)3）チェックボックスを作成します。
const checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "color";
checkbox.value = color;
checkbox.id = id;Code language: JavaScript (javascript)4）チェックボックスをラベル内に配置します。
label.appendChild(checkbox);Code language: CSS (css)5）テキストノードを作成し、ラベルに追加します。
label.appendChild(document.createTextNode(color));Code language: CSS (css)6）ラベルをルート要素に追加します。
document.querySelector("#root").appendChild(label);Code language: CSS (css)次の例も、上記の例のようにチェックボックスを動的に生成します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkboxes</title>
</head>
<body>
<div id="root"></div>
<script>
const colors = ["Red","Green","Blue"];
const html = colors.map(color => `<label for="color-${color}">
<input type="checkbox" name="color" id="color-${color}" value="${color}"> ${color}
</label>`
).join(' ');
document.querySelector("#root").innerHTML = html;
</script>
</body>
</html>Code language: HTML, XML (xml)この例では
- 最初に、Array
map()メソッドとテンプレートリテラルを使用して、ラベルとチェックボックス要素を生成します。 - 次に、String
join()メソッドを使用してHTML文字列を単一のHTMLに結合します。 - 3番目に、HTMLを
#root要素に追加します。
概要
- チェックボックス要素を作成するには、
typeがcheckboxの<input>要素を使用します。 - ユーザビリティとアクセシビリティを向上させるために、チェックボックスをラベル要素内に配置します。
- チェックボックスがチェックされているかどうかをテストするには、
checkbox.checkedプロパティまたは:checkセレクターを使用します。 - チェックボックスの値を取得するには、
value属性を取得します。
このチュートリアルは役に立ちましたか？
