新手小白问个简单的问题。关于checkbox全选全不选的问题。

<!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>这个意思？

二楼反选咋做，比如反选下面有4个checkbox,a,b,c,d其中我已经勾上了a,b俩个，当我点击反选时，a,b的勾没了，c,d的就勾上了！

这两个函数是响应不同的事件的，硬把它们放在一起，还是要自己判断是在响应哪个事件（点击“全选”了还是点击单个选项了），结果是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;
    }
}

按下提交回复，想到了一个有意思的注释，就再发一遍吧。
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;
    }

}

楼上的思路真确！你看看你写这个
  for(i=0;i<getproduct.length;i++)
    {
        if(getall.checked==true)
        getproduct[i].checked=true;
        else
        getproduct[i].checked=false;
    }
你这个代码能实现功能，但是略显繁琐，只要列表选框的checked属性值跟随getall.checked 一起变化就可以了。

真晕。写的这么复杂。这样写最简单了：例子如下
<!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>

调试易

新手小白问个简单的问题。关于checkbox全选全不选的问题。

解决方案 »