代码需求， 使用attr只能执行一次，使用prop则完美实现全选和反选，获取所有选中的项并把选中项的文本组成一个字符串。
解决方案一：
代码如下：
<html>
<head>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
<input type="checkbox" name="chk_list[]" value="1" />1
<input type="checkbox" name="chk_list[]" value="2" />2
<input type="checkbox" name="chk_list[]" value="3" />3
<input type="checkbox" name="chk_list[]" value="4" />4
<input type="checkbox" name="chk_all" id="chk_all" />全选/取消全选
<script type="text/javascript">
$("#chk_all").click(function(){
// 使用attr只能执行一次
$("input[name='chk_list[]']").attr("checked", $(this).attr("checked"));
// 使用prop则完美实现全选和反选
$("input[name='chk_list[]']").prop("checked", $(this).prop("checked"));
// 获取所有选中的项并把选中项的文本组成一个字符串
var str = '';
$($("input[name='chk_list[]']:checked")).each(function(){
str += $(this).next().text() + ',';
});
alert(str);
});
</script>
</body>
</html>
总结：
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
参考 //www.jb51.net/article/62308.htm
解决方案二：
问题描述：
$(".chooseall").click(function(){
if($(".chooseall").attr("checked") == "checked"){
$("input[name='checkbox1']").removeAttr("checked","checked");
console.log(1);
}else{
$("input[name='checkbox1']").attr("checked","checked");
console.log(2);
}
});
上面的这个代码第一次点击和第二次点击，能实现全选和反选功能，但一遍之后就不再起作用，这是什么情况啊
除了第一个checkbox之外，其余的都是ajax动态生成的，跟这个有关系么？console.log每次点击的都能交替输出1和2，但就是中间的代码不能执行。
解决方案：
removeAttr参数只需要一个，removeAttr("checked")
不过建议替换成
$(".chooseall").click(function(){
if($(".chooseall").prop("checked") == true){
$("input[name='checkbox1']").prop("checked", false);
console.log(1);
}else{
$("input[name='checkbox1']").prop("checked", false);
console.log(2);
}
});
或者更简洁的，
$(".chooseall").click(function(){
var isChecked = $(this).prop("checked");
$("input[name='checkbox1']").prop("checked", isChecked);
});
以上是Jquery全选与反选点击执行一次的解决方案，希望对大家有所帮助。
您可能感兴趣的文章:
- jQuery实现按钮只点击一次后就取消点击事件绑定的方法
- jQuery事件绑定on()、bind()与delegate() 方法详解
- jQuery事件绑定与解除绑定实现方法
- 浅谈jQuery事件绑定原理
- jQuery事件绑定和委托实例
- jquery 新建的元素事件绑定问题解决方案
- 解析jQuery的三种bind/One/Live事件绑定使用方法
- 关于jQuery新的事件绑定机制on()的使用技巧
- jquery实现简单的全选和反选功能
- jquery实现全选、反选、获得所有选中的checkbox
- jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
- jQuery 全选 全不选 事件绑定的实现代码
