HOWTO · JavaScript
JavaScript でチェックされたチェックボックスの値を取得する
チェックされたチェックボックスの値を取得する方法
このページの内容
この記事は、JavaScript を使用して、チェックボックスがチェックされているかどうかを確認し、チェックされているチェックボックスの値を取得し、すべてのチェックボックスを選択/選択解除するのに役立ちます。
JavaScript でチェックボックスがチェックされているかどうかを検査する
チェックボックスには、チェックされている状態とチェックされていない状態の 2つの状態があります。
これらの手順に従って、チェックボックスの状態を判別できます。
- まず、
getElementById()やquerySelector()などのDOM テクニックを使用してチェックボックスを選択します。 - 次に、checkbox 要素の checked プロパティに移動します。チェックされたプロパティが実際のものである場合、チェックボックスがオンになります。そうでなければ、そうではありません。
次のコードは、querySelector() メソッドでこれを示しています。
<!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="submit">
<input type="checkbox" id="submit" name="submit" value="yes"> Submit
</label>
<script>
const js = document.querySelector('#submit');
console.log(js.checked);
</script>
</body>
</html>
この例では、
まず、Html チェックボックス要素を作成できます。
<label for="submit">
<input type="checkbox" id="submit" name="submit" value="yes"> Submit
</label>
次に、チェックボックスのチェックされた属性を id #submit で調べます。
const js = document.querySelector('#submit');
console.log(js.checked);
チェックボックスがオフになっているため、コンソールに表示される結果は false になります。
false
チェックボックスをオンにすると、コンソールに 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="submit">
<input type="checkbox" id="submit" name="submit" value="yes" checked> Submit
</label>
<script>
const js = document.querySelector('#submit');
console.log(js.checked);
</script>
</body>
</html>
コンソールに出力が true として表示されます。
true
チェックボックス値の取得
チェックボックスと button は次のページにあります。ボタンをクリックすると、チェックボックスの値がコンソールウィンドウに表示されます。
<!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="payment">
<input type="checkbox" id="payment" name="payment"> Payment
</label>
<button id="bt">Submit</button>
<script>
const js = document.querySelector('#payment');
const bt = document.querySelector('#bt');
bt.onclick = () => {
alert(js.value);
};
</script>
</body>
</html>
チェックボックスが選択されているかどうかに関係なく、チェックボックスの value プロパティを取得すると、常に on 文字列が取得されます。
JavaScript で querySelectorAll() を使用して複数の選択されたチェックボックスの値を取得する
次のページに 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 subject:</p>
<label for="s1"> <input type="checkbox" name="subject" value="Math" id="s1">Math</label>
<label for="s2"><input type="checkbox" name="subject" value="Science" id="s2">Science</label>
<label for="s3"><input type="checkbox" name="subject" value="Health" id="s3">Health</label>
<p>
<button id="bt">Get Selected subject</button>
</p>
<script>
const bt = document.querySelector('#bt');
bt.addEventListener('click', (event) => {
let checkboxes = document.querySelectorAll('input[name="subject"]:checked');
let output = [];
checkboxes.forEach((checkbox) => {
output.push(checkbox.value);
});
alert(output);
});
</script>
</body>
</html>
以下はそれがどのように機能するかです。
同じ名前（色）で値が異なる 3つのチェックボックス要素を HTML で作成します。
<label for="s1"> <input type="checkbox" name="subject" value="Math" id="s1">Math</label>
<label for="s2"><input type="checkbox" name="subject" value="Science" id="s2">Science</label>
<label for="s3"><input type="checkbox" name="subject" value="Health" id="s3">Health</label>
JavaScript の場合：
- 開始するには、ボタンのクリックイベントハンドラーに以下を追加します。
- 次に、ドキュメントを使用して、指定したチェックボックスを選択します。クリックイベントハンドラー内で、querySelectorAll()メソッドを使用します。
- 3 番目に、選択したチェックボックスの値を使用して配列を作成します。
const bt = document.querySelector('#bt');
bt.addEventListener('click', (event) => {
let checkboxes = document.querySelectorAll('input[name="subject"]:checked');
let output = [];
checkboxes.forEach((checkbox) => {
output.push(checkbox.value);
});
alert(output);
});
JavaScript で getElementById() メソッドを使用して複数の選択された Chechbox の値を取得する
次に、getElementById() メソッドを使用してユーザーのすべてのチェックボックス値を取得する方法を学習します。以下の例を見てください。
<html>
<body>
<h2>Create a checkbox and get its value</h2>
<h4> Select the subject, you are interested in</h4>
<tr>
<td> Science: <input type="checkbox" id="s1" class="ss" value="Science"> </td>
<td> Math: <input type="checkbox" id="s2" class="ss" value="Math"> </td>
</tr> <tr>
<td> Social: <input type="checkbox" id="s3" class="ss" value="Social"> </td>
<td> Optional: <input type="checkbox" id="s4" class="ss" value="Optional"> </td>
</tr> <tr>
<td> Computer: <input type="checkbox" id="s5" class="ss" value="Computer"> </td>
<td> Health: <input type="checkbox" id="s6" class="ss" value="Health"> </td>
<button onclick="checkAll()">Check all</button> <br><br>
<button onclick="getCheckboxValue()">Submit</button> <br>
<h4 id="result"></h4>
<script>
function checkAll() {
var inputs = document.querySelectorAll('.ss');
for (var k = 0; k < inputs.length; k++) {
inputs[k].checked = true;
}
}
function getCheckboxValue() {
var sub1 = document.getElementById("s1");
var sub2 = document.getElementById("s2");
var sub3 = document.getElementById("s3");
var sub4 = document.getElementById("s4");
var sub5 = document.getElementById("s5");
var sub6 = document.getElementById("s6");
var result=" ";
if (sub1.checked == true){
var ss1 = document.getElementById("s1").value;
result = ss1 + ",";
}
else if (sub2.checked == true){
var ss2 = document.getElementById("s2").value;
result = result + ss2 + ",";
}
else if (sub3.checked == true){
document.write(result);
var ss3 = document.getElementById("s3").value;
result = result + ss3 + ",";
}
else if (sub4.checked == true){
var ss4 = document.getElementById("s4").value;
result = result + ss4 + ",";
}
else if (sub5.checked == true){
var ss5 = document.getElementById("s5").value;
result = result + ss5 + ",";
}
else if (sub6.checked == true){
var ss6 = document.getElementById("s6").value;
result = result + ss6;
} else {
return document.getElementById("result").innerHTML = "please,select any one";
}
return document.getElementById("result").innerHTML = "You have selected " + result + " subjects";
}
</script>
</body>
</html>
出力：
このコードを実行することにより、以下のような応答が得られます。ここでは、よく知っている主題を選択できます。
