在 JavaScript 中获取复选框的值
Shiv Yadav
2023年10月12日
- 在 JavaScript 中检查是否选中了复选框
-
获取
复选框值 -
在 JavaScript 中使用
querySelectorAll()获取多个选定复选框的值 -
使用 JavaScript 中的
getElementById()方法获取多个选定复选框的值
本文将帮助你使用 JavaScript 检查是否选中了复选框，获取选中复选框的值，以及选择/取消选择所有复选框。
在 JavaScript 中检查是否选中了复选框
复选框有两种状态：选中和未选中。
你可以按照这些过程来确定复选框的条件。
- 首先，使用
getElementById()或querySelector()之类的DOM 技术来选择复选框。 - 然后，进入复选框元素的选中属性。如果其选中的属性是实际的，则选中该复选框；否则，它不是。
以下代码使用 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
获取复选框值
复选框 和按钮 可以在下一页找到。单击按钮时，复选框的值将显示在控制台窗口上：
<!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() 获取多个选定复选框的值
在下一页可以找到三个复选框。当你选择一个或多个复选框并按下按钮时，将显示所选复选框的值。
<!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>
下面是它的工作原理。
我们在 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 中：
- 首先，将以下内容添加到按钮的单击事件处理程序中：
- 其次，使用文档选择指定的复选框。在 click 事件处理程序中，使用 querySelectorAll() 方法：
- 第三，使用选中复选框的值创建一个数组：
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() 方法获取多个选定复选框的值
现在你将学习如何使用 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>
输出：
通过运行这段代码，我们会得到类似下面的响应，你可以在其中选择你熟悉的主题。
作者： Shiv Yadav
Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.
LinkedIn