首页 > 代码库 > 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>

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