新手小白问个简单的问题。关于checkbox全选全不选的问题。
先简单说下。
有一个是全选的checkbox，ID叫做"all"。
<input id="all" type="checkbox" value="全选" onclick="choiceall()" />
<input name="product" type="checkbox" value="1" onclick="judgethechoice()" /><input name="product" type="checkbox" value="2" onclick="judgethechoice()" /><input name="product" type="checkbox" value="3" onclick="judgethechoice()" /><input name="product" type="checkbox" value="4" onclick="judgethechoice()" />
function choiceall(){ var getall=document.getElementById("all"); var getproduct=document.getElementsByName("product"); for(i=0;i<getproduct.length;i++) { if(getall.checked==true) getproduct[i].checked=true; else getproduct[i].checked=false; } }function judgethechoice(){ var getall=document.getElementById("all"); var getproduct=document.getElementsByName("product"); for(i=0;i<getproduct.length;i++) { if(getproduct[i].checked==false) getall.checked=false; if(getproduct[i].checked==true&&getall.checked==false) getall.checked=true; }}<!DOCTYPE HTML><html> <head> <meta charset="gb2312" /> <title></title> <style> </style> </head> <body> 全选<input id="all" type="checkbox" value="全选" /> <br /> <input name="product" type="checkbox" value="1" /> <input name="product" type="checkbox" value="2" /> <input name="product" type="checkbox" value="3" /> <input name="product" type="checkbox" value="4" /> <script> ;(function(){ var all = document.getElementById('all'); var objs = document.getElementsByName('product'); var len = objs.length; document.onclick = function(e){ e = window.event || e; var t = e.srcElement || e.target; var name = t.tagName.toLowerCase(); if( name == 'input' && t.type == 'checkbox' ){ if( t.id == 'all' ){ var flag = t.checked; for(var i = 0; i < len; i++){ if( flag ){ objs[i].checked = true; }else{ objs[i].checked = false; } } }else if( t.name == 'product' ){ var count = 0; for(var i = 0; i < len; i++){ if( objs[i].checked ){ count++; } } if( count == len ){ all.checked = true; }else{ all.checked = false; } } } } })(); </script> </body></html>
[解决办法]
这两个函数是响应不同的事件的，硬把它们放在一起，还是要自己判断是在响应哪个事件（点击“全选”了还是点击单个选项了），结果是1.做了多余的工作，浏览器已经帮你分清是哪个被点击了，现在你要再把它混起来，自己再分一遍。2.代码可读性不好。本应在两个函数中的内容掺杂在一起。
function choiceall(){ var getall=document.getElementById("all"); var getproduct=document.getElementsByName("product"); for(i=0;i<getproduct.length;i++) { //if(getall.checked==true) //getproduct[i].checked=true; //else //getproduct[i].checked=false; getproduct[i].checked = getall.checked; } }function judgethechoice(){ var getall=document.getElementById("all"); var getproduct=document.getElementsByName("product"); for(i=0;i<getproduct.length;i++) { if(getproduct[i].checked==false) getall.checked=false; if(getproduct[i].checked==true&&getall.checked==false) // 这儿有bug，现在的结果是只要最后一个选项被选了，“all”就会被选上。 // 和前面其它选项的状态无关 getall.checked=true; }}function reverse() { var getall=document.getElementById("all"); var getproduct=document.getElementsByName("product"); getall.checked = true; for (var i=0;i<getproduct.length;i++) { var newvalue = !getproduct[i].checked; getproduct[i].checked = newvalue; getall.checked = getall.checked && newvalue; }}
[解决办法]
楼上的思路真确！你看看你写这个
for(i=0;i<getproduct.length;i++) { if(getall.checked==true) getproduct[i].checked=true; else getproduct[i].checked=false; }
[解决办法]
真晕。写的这么复杂。这样写最简单了：例子如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
<body>
<table id="tableId">
<tr>
<td>
<input name="product" type="checkbox" value="1" />
<input name="product" type="checkbox" value="2" />
<input name="product" type="checkbox" value="3" />
<input name="product" type="checkbox" value="4" />
全选按钮：<input name="selectAllOrNot" type="checkbox" onclick="selectAllOrNot(this,'product');"/>
</td>
</tr>
</table>
</body>
<script language="javascript" type="text/javascript">
function selectAllOrNot(){
var targetObject = arguments[0];
var targetName = arguments[1];
var targetList = $("input[name='" + targetName + "']");
targetList.attr("checked", targetObject.checked);
}
</script>
</body>
</html>