jQuery全选与反选，且解决点击只执行一次的问题

最新推荐文章于 2024-05-30 11:27:58 发布

POJIE19820106

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量135

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Lily-L/p/7119215.html

版权

<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方法。
参考 http://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html

转载于:https://www.cnblogs.com/Lily-L/p/7119215.html

POJIE19820106

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery全选与反选，且解决点击只执行一次的问题

<html><head>　　<script src="jquery-1.11.1.min.js" type="text/javascript"></script></head><body>　　<input type="checkbox" name="chk_list[]" value="...
复制链接

扫一扫