jquery checkbox 全选操作不正常的问题解决

       背景：对一个列表中的所有数据的checkbox操作。通过一按钮的形式，对所有数据的checkbox全选后，并进行提交。

       

<ul class="main-menu" id="task">
 	<li class="nav-header hidden-tablet"><input  type="checkbox" id="checkall" name="allCheckbox" onclick="checkAll(this);"><span>checkAll</span></li>	
    
	  	<li><input type="checkbox" id="checkbox-1" name="checkbox"><span>checkbox1</span></li>
	
	  	<li><input type="checkbox" id="checkbox-2" name="checkbox"><span>checkbox2</span></li>
	
	  	<li><input type="checkbox" id="checkbox-3" name="checkbox"><span>checkbox3</span></li>

	  	<li><input type="checkbox" id="checkbox-4" name="checkbox"><span>checkbox4</span></li>

	  	<li><input type="checkbox" id="checkbox-5" name="checkbox"><span>checkbox5</span></li>
</ul>

 

 

    

       问题：第一次的全选没有问题，而当手动去除几个选项后，再点击按钮时，不能实现全选的操作了。

 

 

//按钮的全部提交
function submitAllByButton() {
    var p = parent.window.document;  //获取父窗口的对象
    var checkall = p.getElementById("checkall");  //在父窗口中的id，通过id获取该总checkbox
    if(!checkall.checked){   //如果总的选中checkbox没有选中状态，则进行选中
        $(checkall).attr("checked", true);
    }
    var checkbox = p.getElementsByName("checkbox");  //获得各个分checkbox
    
    for(var i = 0 ; i < checkbox.length; i ++){   //循环，也可以用jquery的each
        var temp = checkbox[i];
        if(!temp.checked) {  //判断如果没有选中，则进行选中操作
            $(temp).attr("checked", true);
        } 
    }
    submit();   //最后是提交操作。
}

 

在这里不讨论业务实现逻辑的好坏。只是讲述当全部提交按钮再点击第二次的时候，不能对手动点选过的checkbox进行了操作。而且在上面代码里的循环里得到的选中结果，是"checked"也就是true。

 

这到底是怎么回事呢？为什么浏览器会返回给程序这个结果呢？在浏览器显示上明明已经是非“checked"状态。为什么程序得到的却是”checked“呢？

 

最后，我在jquery API 中找到了答案。

 

随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误

 

而在这之前我忽略了checkbox的状态显示，在我的项目里，它显示的两种状态分别是：”undefined“和"checked"

 

解决办法：

       使用JQuery中的.prop()方法，我的修改后代码如下，把.attr换成.prop

 

//按钮的全部提交
function submitByAllButton() {
    var p = parent.window.document;
    var checkall = p.getElementById("checkall");
    if(!checkall.checked){
        $(checkall).prop("checked", true);
    }
    var checkbox = p.getElementsByName("checkbox");
    
    for(var i = 0 ; i < checkbox.length; i ++){
        var temp = checkbox[i];
        if(!temp.checked) {
            $(temp).prop("checked", true);
        } 
    }
    submit();
}

 

而上面的解释说明也是在jquery API中的prop方法里有写到。