实现表单全选通常需要两个步骤:
1. 添加一个全选复选框,用于控制所有子复选框的选中状态。
2. 当全选复选框被选中或取消选中时,遍历所有子复选框并修改它们的选中状态。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单全选示例</title>
</head>
<body>
<form id="myForm">
<input type="checkbox" name="fruit[]" value="apple">苹果<br>
<input type="checkbox" name="fruit[]" value="banana">香蕉<br>
<input type="checkbox" name="fruit[]" value="orange">橙子<br>
<input type="checkbox" name="fruit[]" value="grape">葡萄<br>
<input type="checkbox" name="all" id="checkAll">全选<br>
<button type="submit">提交</button>
</form>
<script>
// 获取全选复选框和子复选框元素
let checkAll = document.getElementById('checkAll');
let checkboxes = document.querySelectorAll('input[name="fruit[]"]');
// 给全选复选框添加事件监听器
checkAll.addEventListener('change', function() {
for (let i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = checkAll.checked;
}
});
</script>
</body>
</html>
以上代码中,我们首先获取了全选复选框和子复选框的元素,然后给全选复选框添加了一个 change 事件监听器。当全选复选框的状态改变时,我们遍历所有子复选框并将它们的选中状态设置为与全选复选框相同。这样就可以实现表单的全选功能了。
注意:上面示例中使用了 name="fruit[]" 来指定子复选框的名称,并且使用了 querySelectorAll 方法获取子复选框的元素。