html复选框全选和取消全选
时间: 2023-12-23 11:56:37 浏览: 28
可以使用JavaScript实现HTML复选框全选和取消全选功能。
以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Checkbox全选和取消全选</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#checkAll").click(function(){
$("input[type='checkbox']").prop('checked', $(this).prop('checked'));
});
});
</script>
</head>
<body>
<h2>Checkbox全选和取消全选</h2>
<input type="checkbox" id="checkAll">全选
<br><br>
<input type="checkbox" name="fruit" value="apple">苹果
<input type="checkbox" name="fruit" value="banana">香蕉
<input type="checkbox" name="fruit" value="orange">橙子
<input type="checkbox" name="fruit" value="grape">葡萄
</body>
</html>
```
该代码使用jQuery库实现全选和取消全选功能。当全选复选框被点击时,使用jQuery选择器选中所有的复选框,并将它们的状态设置为与全选复选框相同。