码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-07-05 01:22:51      阅读:281      评论:0      收藏:0      [点我收藏+]

标签:dom   name   body   list   this   class   box   .com   pre   

<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

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

标签:dom   name   body   list   this   class   box   .com   pre   

原文地址:http://www.cnblogs.com/Lily-L/p/7119215.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!