第一次点“全选时”可以选中,再点“全不选”也正常取消选中,然后再点“全选”时发现操作没效果了。通过attr("checked")读取可以获得checked的内容,可见复选框的值已经是正确了,但是实际页面却不能正常显示。之前用的是1.10.1的版本,但是切换回1.8.3的可以反复点击,最后确定 从1.9.1开始到最新都无法正常显示。
<form> 你爱好的运动是?<input type="checkbox" id="checkedAll2" />全选/全不选<br/> <input type="checkbox" name="items" value="足球"/>足球 <input type="checkbox" name="items" value="篮球"/>篮球 <input type="checkbox" name="items" value="羽毛球"/>羽毛球 <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/> <input type="button" id="send" value="提 交"/> </form> <script>// 全选/全不选 $('#checkedAll2').click(function(){ $('[name=items]:checkbox').a't't('checked',this.checked); }); //当已有一个没有被选中是全选按钮不被选中 $('[name=items]:checkbox').click(function(){ var flag=true; $('[name=items]:checkbox').each(function(){ if(!this.checked){ flag=false; } }); $('#checkedAll2').attr('checked',flag); }); //输出值 $("#send").click(function(){ var str="你选中的是:\r\n"; $('[name=items]:checkbox:checked').each(function(){ str+=$(this).val()+"\r\n"; }) alert(str); });</script>
解决方案:
// 全选/全不选 attr改成prop $("#checkedAll2").click(function(){ $('[name=items]:checkbox').prop('checked',this.checked); });
$('#checkedAll2').prop('checked',flag);
.prop()方法是一种简便的设置值得方式,特别是多属性、使用函数返回值或者一次性在多个elements中设置数值。在设置selectedIndex
, tagName
, nodeName
, nodeType
, ownerDocument
, defaultChecked
, 或者defaultSelected时应该使用本方法。从jQuery1.6起,这些属性不再能够用.attr()方法设置了,它们没有相当的attributes,只有properties。
Properties可以改变DOM元素的动态站台,不适用序列化的attribue。比如input的value属性、input和button的disabled属性,或者checkbox的checked属性。这时应该使用.prop()来替代.attr()来设置disabled和checked。.val()用于获取或者设置其value值。