用js写一个在页面实现全选和全不选的效果,用户勾选全选时,能够将所列书全部选中,全选前的复选框不选中,所列书也不选中
时间: 2023-06-05 16:05:21 浏览: 156
好的,这是一个简单的JavaScript代码实现全选和全不选的功能:
HTML代码:
```
<input type="checkbox" id="checkAll"> 全选
<br>
<input type="checkbox" class="checkbox" value="书籍1"> 书籍1
<br>
<input type="checkbox" class="checkbox" value="书籍2"> 书籍2
<br>
<input type="checkbox" class="checkbox" value="书籍3"> 书籍3
<br>
<input type="checkbox" class="checkbox" value="书籍4"> 书籍4
<br>
<input type="checkbox" class="checkbox" value="书籍5"> 书籍5
```
JavaScript代码:
```
var checkAll = document.getElementById("checkAll");
var checkboxes = document.getElementsByClassName("checkbox");
checkAll.onclick = function() {
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = this.checked;
}
}
```
当用户勾选全选时,代码会遍历所有的复选框,将它们都勾上;当用户取消全选时,代码会将所有的复选框都取消勾选状态。
阅读全文