您的位置：首页 > Web前端 > JQuery

解决jQuery操作checkbox第二次失效的问题

2015-08-15 19:51 639 查看

直接上代码：

<html>
<head>
<script src="jquery.js"></script>
<script>

$(function(){
$("#selectAll").click(function(){

$(":checkbox").attr("checked",true);

});
$("#selectNo").click(function(){
$(":checkbox").attr("checked",false);
});
$("#selectInverse").click(function(){
$(":checkbox").each(function(){
$(this).attr("checked",!$(this).attr("checked"));
})
});
});

</script>
</head>
<body>
足球<input type="checkbox" name="items" value="足球" >
蓝球<input type="checkbox" name="items" value="蓝球">
排球<input type="checkbox" name="items" value="排球">
羽毛球<input type="checkbox" name="items" value="羽毛球">
<input type="button" id="selectAll" value="全选" onclick="selectAll()">
<input type="button" id="selectNo" value="全不选">
<input type="button" id="selectInverse" value="反选">
</body>

</html>

问题：第一次点击可以出现想要的结果，可是第二次点击全选，则再也没有选中。

根源：jQuery版本的问题。对于$(“**”).attr(“attrName”)，jQuery API明确说明，1.6+的jQuery要用prop，尤其是checkBox的checked的属性的判断。所以将代码更改如下即可解决问题。

<script>

$(function(){
$("#selectAll").click(function(){

$(":checkbox").prop("checked",true);

});
$("#selectNo").click(function(){
$(":checkbox").prop("checked",false);
});
$("#selectInverse").click(function(){
$(":checkbox").each(function(){
$(this).prop("checked",!$(this).prop("checked"));
})
});
});

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery checkbox 全选反选全不选

相关文章推荐

新的分享

章节导航