上图是实现效果。
下面贴代码
表的第一行也就是<th>中的代码,onclick事件是实现全选或者全不选效果。
<th> <input id="allboxs" onclick="allcheck()" type="checkbox"/> </th>
td中的代码
<td> <input name="boxs" type="checkbox"/> </td>
js中实现全选、全不选效果
function allcheck() { var nn = $("#allboxs").is(":checked"); //判断th中的checkbox是否被选中,如果被选中则nn为true,反之为false if(nn == true) { var namebox = $("input[name^='boxs']"); //获取name值为boxs的所有input for(i = 0; i < namebox.length; i++) { namebox[i].checked=true; //js操作选中checkbox } } if(nn == false) { var namebox = $("input[name^='boxs']"); for(i = 0; i < namebox.length; i++) { namebox[i].checked=false; } } }
以上代码值得一提的是,获取checkbox的值或其他的什么,建议用name属性值操作,因为id属性在每一个页面中默认是唯一的,而name属性则可以取到属性值相同的所有。