JS实现全选
嗨，同学们好，老师这里是专门教同学解决一些针对性的问题，所以说综合起来，就要靠同学自己了。
这节课我们学一个很实用的东西，全选操作！比如淘宝这种商城对吧，我的购物车，我要全选购买，或者删除，一个一个的来肯定麻烦，所以就有了全选和批量处理，那就是复选框！
这里我们用一个table表格来控制吧！看代码：
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>JS全选，复选框</title></head><body><table id="mytable"> ???<tr> ???????<th><input type="checkbox" id="quan"/></th> ???????<th>序号</th> ???????<th>姓名</th> ???????<th>性别</th> ???????<th>地址</th> ???</tr> ???<tr> ???????<td><input type="checkbox"/></td> ???????<td>1</td> ???????<td>张三</td> ???????<td>女</td> ???????<td>四川省成都市</td> ???</tr> ???<tr> ???????<td><input type="checkbox"/></td> ???????<td>2</td> ???????<td>李斯</td> ???????<td>女</td> ???????<td>四川省成都市</td> ???</tr> ???<tr> ???????<td><input type="checkbox"/></td> ???????<td>3</td> ???????<td>玩玩玩</td> ???????<td>男</td> ???????<td>四川省成都市</td> ???</tr> ???<tr> ???????<td><input type="checkbox"/></td> ???????<td>4</td> ???????<td>哈哈哈</td> ???????<td>女</td> ???????<td>四川省成都市</td> ???</tr></table><script> ???// onload事件 页面加载完直接运行 ???window.onload = function () { ???????var mytable = document.getElementById("mytable"); ???????var qq = document.getElementById("quan"); ???????mytable.style.border = "1px solid gray"; ???????mytable.style.borderCollapse = "collapse"; ???????mytable.style.textAlign = "center"; ???????mytable.style.width = "800px"; ???????//以上是给table表格添加样式 ???????//使用循环获取到表格的tr长度 ???????for (i = 1; i < mytable.rows.length; i++) { ???????????//因为复选框是tr里的第一个，所以cells里的数组下标为0 ???????????mytable.rows[i].cells[0].firstChild.onclick = function () { ???????????????//当我点击它，就做判断 ???????????????//先判断它本身是被选中的就往下面走 ???????????????if (this.checked) { ???????????????????//如果它被选中我们就走进for循环 ???????????????????for (j = 1; j < mytable.rows.length; j++) { ???????????????????????//获取tr的长度，然后判断所有的复选框 ???????????????????????if (!mytable.rows[j].cells[0].firstChild.checked) { ???????????????????????????//如果这些复选框，有一个没有被选中，全选就变成未被选中 ???????????????????????????qq.checked = false; ???????????????????????????return true; ???????????????????????????//最后结束返回 true ???????????????????????} ???????????????????} ???????????????????//if判断，所有复选框都是选中的，就让全选变成true 变成选中 ???????????????????qq.checked=true; ???????????????} ???????????????else { ???????????????????//如果它本身没有被选中，全选当然是变成false 未被选中 ???????????????????qq.checked = false; ???????????????} ???????????} ???????} ???????//点击全选的复选框，将所有的复选框变成和它一样，要么选中，要么未选中 ???????qq.onclick=function() { ???????????for (i = 1; i < mytable.rows.length; i++) { ???????????????mytable.rows[i].cells[0].firstChild.checked = this.checked; ???????????} ???????}; ???????//以下是循环并判断表格里的tr和td，添加css样式 ???????for (i = 0; i < mytable.rows.length; i++) { ???????????if (i == 0) { ???????????????mytable.rows[0].style.backgroundColor = "lightgray"; ???????????} else { ???????????????mytable.rows[i].onmouseover = function () { ???????????????????this.style.backgroundColor = "red"; ???????????????}; ???????????????mytable.rows[i].style.cursor = "pointer"; ???????????????if (i % 2 == 0) { ???????????????????mytable.rows[i].style.backgroundColor = "yellow"; ???????????????????mytable.rows[i].onmouseout = function () { ???????????????????????this.style.backgroundColor = "yellow"; ???????????????????} ???????????????} else { ???????????????????mytable.rows[i].style.backgroundColor = "orange"; ???????????????????mytable.rows[i].onmouseout = function () { ???????????????????????this.style.backgroundColor = "orange"; ???????????????????} ???????????????} ???????????} ???????????for (j = 0; j < mytable.rows[i].cells.length; j++) { ???????????????var c = mytable.rows[i].cells[j]; ???????????????c.style.border = "1px solid gray"; ???????????} ???????} ???}</script></body></html>以上代码，同学们主要看的不是给table表格添加样式，当然了，最下面的代码，判断和循环那里可以多看看，是什么意思，我没写注释，重点是，全选的操作那里。
代码同学们可以直接copy拿走，但是一定要了解里面的代码，这样你修改成自己的代码也就简单了，而且以后自己才能写出来哦。
第十六篇 JS实现全选操作
原文地址：http://www.cnblogs.com/longfeng995/p/7590426.html