首页 > 代码库 > jQuery全选与反选，且解决点击只执行一次的问题
jQuery全选与反选，且解决点击只执行一次的问题
<html>
<head>
<script src="http://www.mamicode.com/jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
<input type="checkbox" name="chk_list[]" value="http://www.mamicode.com/1" />1
<input type="checkbox" name="chk_list[]" value="http://www.mamicode.com/2" />2
<input type="checkbox" name="chk_list[]" value="http://www.mamicode.com/3" />3
<input type="checkbox" name="chk_list[]" value="http://www.mamicode.com/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方法。
- 参考 http://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html
jQuery全选与反选，且解决点击只执行一次的问题
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。