在网页开发中，复选框（checkbox）是一种常见的表单控件，允许用户从一组选项中选择一个或多个，使用JavaScript可以增强复选框的功能，例如动态添加、删除选项，或者根据用户的选择执行特定的操作，本文将详细介绍如何使用JavaScript操作复选框，包括创建、选中、取消选中以及获取选中状态等。
创建复选框
我们需要在HTML文档中创建一个复选框，可以通过<input>标签的type="checkbox"属性来定义一个复选框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkbox Example</title>
</head>
<body>
<form id="myForm">
<label>
<input type="checkbox" id="option1" name="options"> Option 1
</label>
<br>
<label>
<input type="checkbox" id="option2" name="options"> Option 2
</label>
<br>
<label>
<input type="checkbox" id="option3" name="options"> Option 3
</label>
</form>
<script src="script.js"></script>
</body>
</html>使用JavaScript选中复选框
要使用JavaScript选中复选框，可以使用checked属性，当checked属性设置为true时，复选框将被选中；设置为false时，复选框将被取消选中。
document.addEventListener('DOMContentLoaded', () => {
let option1 = document.getElementById('option1');
option1.checked = true; // 选中第一个复选框
});3. 使用JavaScript取消选中复选框
与选中复选框类似，只需将checked属性设置为false即可取消选中。
document.addEventListener('DOMContentLoaded', () => {
let option2 = document.getElementById('option2');
option2.checked = false; // 取消选中第二个复选框
});获取复选框的选中状态
要检查复选框是否被选中，可以读取其checked属性，如果返回值为true，则表示复选框被选中；如果为false，则表示未选中。
document.addEventListener('DOMContentLoaded', () => {
let option3 = document.getElementById('option3');
if (option3.checked) {
console.log('Option 3 is checked');
} else {
console.log('Option 3 is not checked');
}
});根据条件动态改变复选框状态
有时我们需要根据某些条件动态改变复选框的状态，当用户点击一个按钮时，根据输入的值决定是否选中某个复选框。
<button id="toggleButton">Toggle Option 1</button>
document.addEventListener('DOMContentLoaded', () => {
let toggleButton = document.getElementById('toggleButton');
let option1 = document.getElementById('option1');
toggleButton.addEventListener('click', () => {
option1.checked = !option1.checked; // 切换Option 1的选中状态
});
});遍历所有复选框并获取选中项
在某些情况下，我们可能需要遍历所有的复选框并获取所有被选中的项，这可以通过查询所有具有相同name属性的复选框来实现。
document.addEventListener('DOMContentLoaded', () => {
let checkboxes = document.querySelectorAll('input[name="options"]');
checkboxes.forEach(checkbox => {
if (checkbox.checked) {
console.log(${checkbox.id} is checked);
}
});
});表格展示选中状态
为了更好地展示每个复选框的状态，我们可以使用表格形式来显示每个复选框的ID和选中状态。
<table border="1">
<thead>
<tr>
<th>Checkbox ID</th>
<th>Checked State</th>
</tr>
</thead>
<tbody id="statusTableBody">
<!-动态填充 -->
</tbody>
</table>
document.addEventListener('DOMContentLoaded', () => {
let statusTableBody = document.getElementById('statusTableBody');
let checkboxes = document.querySelectorAll('input[name="options"]');
checkboxes.forEach(checkbox => {
let row =<tr><td>${checkbox.id}</td><td>${checkbox.checked ? 'true' : 'false'}</td></tr>;
statusTableBody.innerHTML += row; // 动态添加行到表格中
});
});相关问答FAQs
Q1: 如何通过JavaScript动态添加新的复选框？
A1: 可以通过JavaScript的document.createElement()方法创建新的复选框元素，并将其添加到现有的DOM结构中。
let newCheckbox = document.createElement('input');
newCheckbox.type = 'checkbox';
newCheckbox.id = 'newOption';
newCheckbox.name = 'options';
document.getElementById('myForm').appendChild(newCheckbox); // 将新复选框添加到表单中Q2: 如何在用户点击按钮时获取所有选中的复选框的值？
A2: 可以在按钮的点击事件监听器中遍历所有复选框，并收集那些被选中的复选框的值。
document.addEventListener('DOMContentLoaded', () => {
let getSelectedOptionsButton = document.getElementById('getSelectedOptionsButton');
getSelectedOptionsButton.addEventListener('click', () => {
let selectedOptions = [];
let checkboxes = document.querySelectorAll('input[name="options"]:checked'); // 只选择被选中的复选框
checkboxes.forEach(checkbox => {
selectedOptions.push(checkbox.id); // 收集被选中的复选框的ID
});
console.log('Selected options:', selectedOptions);
});
});以上就是关于“checkbox 选中 js”的问题，朋友们可以点击主页了解更多内容，希望可以够帮助大家!
