<button type="checkbox" id="selectAll" onclick="changeCheck(this)">全选/全不选</button>点击该按钮实现点一次全选,再点一次全不选,changeCheck函数怎么写
时间: 2023-07-06 18:34:58 浏览: 35
可以使用以下代码实现该功能:
```javascript
function changeCheck(checkbox) {
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = checkbox.checked;
}
}
```
该函数接收一个参数 `checkbox`,即触发点击事件的复选框。然后通过 `querySelectorAll` 获取所有的复选框,遍历它们并将它们的 `checked` 属性设置为传入的 `checkbox` 的 `checked` 属性。这样就能实现点一次全选,再点一次全不选的功能。
相关问题
html全选全不选反选
以下是HTML中实现全选、全不选和反选的代码示例:
1. 全选效果
```html
<!DOCTYPE html>
<html>
<head>
<title>全选</title>
<script type="text/javascript">
function selectAll(){
var checkboxes = document.getElementsByName("fruit");
for(var i=0; i<checkboxes.length; i++){
checkboxes[i].checked = true;
}
}
</script>
</head>
<body>
<h3>水果列表</h3>
<form>
<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="pear">梨子<br>
<input type="button" value="全选" onclick="selectAll()">
</form>
</body>
</html>
```
2. 全不选效果
```html
<!DOCTYPE html>
<html>
<head>
<title>全不选</title>
<script type="text/javascript">
function unselectAll(){
var checkboxes = document.getElementsByName("fruit");
for(var i=0; i<checkboxes.length; i++){
checkboxes[i].checked = false;
}
}
</script>
</head>
<body>
<h3>水果列表</h3>
<form>
<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="pear">梨子<br>
<input type="button" value="全不选" onclick="unselectAll()">
</form>
</body>
</html>
```
3. 反选效果
```html
<!DOCTYPE html>
<html>
<head>
<title>反选</title>
<script type="text/javascript">
function reverseSelect(){
var checkboxes = document.getElementsByName("fruit");
for(var i=0; i<checkboxes.length; i++){
checkboxes[i].checked = !checkboxes[i].checked;
}
}
</script>
</head>
<body>
<h3>水果列表</h3>
<form>
<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="pear">梨子<br>
<input type="button" value="反选" onclick="reverseSelect()">
</form>
</body>
</html>
```
请利用HTML DOM实现全选、全不选和反选功能。
以下是一个简单的实现示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>DOM全选、全不选和反选示例</title>
<script>
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 = false;
}
}
function toggleSelection() {
var checkboxes = document.getElementsByName("option");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = !checkboxes[i].checked;
}
}
</script>
</head>
<body>
<h1>DOM全选、全不选和反选示例</h1>
<form>
<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>
</form>
<br>
<button onclick="selectAll()">全选</button>
<button onclick="unselectAll()">全不选</button>
<button onclick="toggleSelection()">反选</button>
</body>
</html>
```
在这个示例中,我们使用了 `document.getElementsByName()` 方法来获取所有名字为 "option" 的复选框元素,并使用 for 循环来遍历它们。在 `selectAll()` 函数中,我们将每个复选框的 `checked` 属性设置为 `true`,从而选中它们。在 `unselectAll()` 函数中,我们将每个复选框的 `checked` 属性设置为 `false`,从而取消选中它们。在 `toggleSelection()` 函数中,我们将每个复选框的 `checked` 属性取反,从而将选中的取消选中,将未选中的选中。最后,我们在页面上添加了三个按钮来触发这些函数。
相关推荐
![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)