点击 “全选”按钮使所有的复选框呈现被选中的状态,点击 “反选”按钮使所有的复选框呈现取消勾选的状态。 js
时间: 2023-09-14 11:09:16 浏览: 69
可以使用以下的 JavaScript 代码来实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>复选框全选/反选示例</title>
<script type="text/javascript">
function selectAll(){
var checkboxes = document.getElementsByName("option");
for(var i=0; i<checkboxes.length; i++){
checkboxes[i].checked = true;
}
}
function unselectAll(){
var checkboxes = document.getElementsByName("option");
for(var i=0; i<checkboxes.length; i++){
checkboxes[i].checked = !checkboxes[i].checked;
}
}
</script>
</head>
<body>
<h2>复选框全选/反选示例</h2>
<input type="button" value="全选" onclick="selectAll()">
<input type="button" value="反选" onclick="unselectAll()">
<br><br>
<input type="checkbox" name="option" value="1">选项1<br>
<input type="checkbox" name="option" value="2">选项2<br>
<input type="checkbox" name="option" value="3">选项3<br>
<input type="checkbox" name="option" value="4">选项4<br>
<input type="checkbox" name="option" value="5">选项5<br>
</body>
</html>
```
在这个示例中,我们使用了两个函数 `selectAll` 和 `unselectAll`,分别用来实现全选和反选操作。这两个函数都通过 `getElementsByName` 方法获取了所有名为 `option` 的复选框元素,并对其进行遍历操作,通过 `checked` 属性来设置其选中状态。其中在 `unselectAll` 函数中使用了 `!` 操作符来取反当前选中状态。
我们还添加了一些简单的 HTML 元素来展示这个示例,包括一个标题、两个按钮和五个复选框。你可以复制这个代码到你的本地环境中尝试一下。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)