php 复选框全选和取消,JavaScript实现复选框全选和取消全选

JS网页–全选和取消全选，供大家参考，具体内容如下

表格，初始状态下复选框都是未选中状态，选中表头的复选框后，下面几个复选框变为选中状态，取消表头复选框选中状态后，下面几个复选框选中状态也随之取消；下面的几个复选框同时选中时，表头的复选框也随之选中。

全选和取消全选

table {

width: 200px;

border-collapse: collapse;

margin: 100px auto;

}

table thead {

font-size: 16px;

background-color: skyblue;

}

table th {

border: 1px solid black;

}

table td {

border: 1px solid black;

font-size: 14px;

}

手机品牌价格

手机15000手机26000手机37000

//选择全选 下面复选框设置为checked；

var j_cbAll = document.getElementById('j_cbAll');

var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');

j_cbAll.onclick = function(){

console.log(this.checked);

for (var i =0 ;i < j_tbs.length;i++){

j_tbs[i].checked = this.checked;

}

}

//下面复选框均为checked 全选复选框为checked；

for(var j = 0;j < j_tbs.length; j++){

j_tbs[j].onclick = function(){

var flag =true;

for(var i=0;i

if(!j_tbs[i].checked){

flag=false;

break;

}

}

j_cbAll.checked = flag;

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。