<td><input type="checkbox" id="selectAll">全选/全不选</td>写出点击该按钮实现全选和全不选功能
时间: 2023-09-27 12:06:34 浏览: 48
好的,你可以按照以下步骤来实现点击该按钮实现全选和全不选功能:
1. 给全选按钮绑定一个点击事件:
```javascript
document.getElementById("selectAll").addEventListener("click", function(){
// 全选或全不选代码
});
```
2. 获取所有需要被勾选或取消勾选的复选框:
```javascript
var checkboxes = document.getElementsByTagName('input');
```
3. 根据全选按钮的状态,决定是否将所有复选框勾选或取消勾选:
```javascript
if(this.checked){
for(var i=0; i<checkboxes.length; i++){
if(checkboxes[i].type == 'checkbox'){
checkboxes[i].checked = true;
}
}
}else{
for(var i=0; i<checkboxes.length; i++){
if(checkboxes[i].type == 'checkbox'){
checkboxes[i].checked = false;
}
}
}
```
综合起来,代码如下:
```javascript
document.getElementById("selectAll").addEventListener("click", function(){
var checkboxes = document.getElementsByTagName('input');
if(this.checked){
for(var i=0; i<checkboxes.length; i++){
if(checkboxes[i].type == 'checkbox'){
checkboxes[i].checked = true;
}
}
}else{
for(var i=0; i<checkboxes.length; i++){
if(checkboxes[i].type == 'checkbox'){
checkboxes[i].checked = false;
}
}
}
});
```
这样就可以实现点击该按钮实现全选和全不选功能了。