jquery checkbox 全选操作不正常的有关问题解决
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方法里有写到。