php怎么制作勾选列表,js实现表格勾选框全选功能

实例

html>

Document

*{margin: 0;padding: 0}

/*.main{margin:100px auto;width: 800px}

table{border: 1px solid #ccc;border-collapse: collapse;width: 100%}

td:{width: 800px; border: 1px solid #ccc;text-align: center;}*/

.main{width:800px;margin:50px auto;}

table{

width:100%;

border: 1px solid #ccc;

border-collapse: collapse;

}

td{

width:800px;border: 1px solid #ccc;

text-align: center;

line-height: 40px;

}

th{

width:800px;border: 1px solid #ccc;

text-align: center;

}

全选文章标题状态

文章标题1文章状态1文章标题2文章状态2文章标题3文章状态3文章标题4文章状态4文章标题5文章状态5

function bgColor(){

var trlist=document.getElementsByTagName('tbody')[0].getElementsByTagName('tr');

for(var k=0;k

if(k%2==0){

trlist[k].style.background='#ccc';

}else{

// trlist[k].style.background='red';

}

}

}

bgColor();

function checkAll(){

var objList=document.getElementsByName('list');

console.log("objList="+objList.length);

var count=0;

for(var i=0;i

if(objList[i].checked){

count++;

}else{

console.log(i+':未执行！')

objList[i].checked=true;

}

}

console.log(i);

console.log(count);

if(count==objList.length){

for(var j=0;j

objList[j].checked=false

}

}

}

运行实例 »

点击 "运行实例" 按钮查看在线实例

心得：

操作中出了2个BUG

1、表格实现隔行换色，但是一直只在表头中出现要的颜色，与之前课堂上做的案例不同

在控制台中发现网页代码有两个tbody

后来发现是因为表格中标题caption放的位置不对，把cation放在thead前即可

2、实现单独全选功能，一直无法实现全部选择

利用console.log发现功能当已经全选后取消全选勾选的功能未实现

检查代码发现是一个if判断中条件数值比较只写了一个=。数值对比要用到==或===