jQuery完美实现全选反选不全选

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>jQueryDemo</title>
   <!--import jQuery-->
   <script src="jquery-1.12.4.js"></script>
   <script>
      $(function () {
         //全选
         $("#checkbox1").click(function () {
            //1.使用attr只能有效一次 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
            //$(":checkbox[name = 'items']").attr("checked",this.checked);
            //2.使用prop可以完美解决 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
            $(":checkbox[name = 'items']").prop("checked",this.checked);
         })
         //不全选
         $(":checkbox[name = 'items']").click(function () {
            $("#checkbox1").prop("checked",$(":checkbox[name = 'items']").length == $(":checkbox[name = 'item']:checked").length);
         })
         //反选
         $("#checkbox2").click(function () {
            $(":checkbox[name = 'items']").each(function () {
               $(this).prop("checked",!$(this).prop("checked"));
            })
         })
      })
   </script>
</head>
<body>
   <form>
      You favorite sports is<input type = "checkbox" id = "checkbox1" />Select All/Deselect All
      <input type = "checkbox" id = "checkbox2">Inverse Select
      <br />
         <input type = "checkbox" name = "items" value = "football" />football
         <input type = "checkbox" name = "items" value = "basketball" />basketball
         <input type = "checkbox" name = "items" value = "swim">swim
      <br />
      <!--<input type = "button" id = "checkAll" value = "SelectAll"/>-->
      <!--<input type = "button" id = "checkNo" value = "DeselectAll"/>-->
      <!--<input type = "button" id = "submit" value = "submit"/>-->
   </form>
</body>
</html>


 

你可能感兴趣的:(jquery)