复选框-全选

[LSYY888]

全选按钮+复选框

 html
<label for="checkbox"><input type="checkbox" value="checkbox" class="all-select-option"/>全选</label>
<input type="checkbox"  class="checkout" name="userIds"/>

 js
                var checkout = $(".checkout");
                $("form").on("click", "input", function (e) {
                         全选
                  if (e.target.className == "all-select-option") {
                    if ($(this).is(":checked")) {
                      $(".checkout").prop("checked", true);
                    } else {
                      $(".checkout").prop("checked", false);
                    }

                  }
                       复选框
                  if (e.target.className == "checkout") {
                    if ($(this).is(":checked")) {
                      $(this).prop("checked", true);
                    } else {
                      $(this).prop("checked", false);
                    }
                  }
                    遍历所有的复选框
                  var flag=0; //和通过数组获取长度一样的用法。
                  $.each(checkout, function (i, v) {
                    if($(v).is(":checked")){
                      flag++;
                    }
                    if (flag===0) {
                      $(".new-create-manager").removeClass("btn-bg");
                    } else {
                      $(".new-create-manager").addClass("btn-bg");
                    }
                  })

                })

思路：

1、全选按钮和每一个复选框按钮的标签都是input,所以可以通过事件委托来给这两个对象添加单击事件；
2、单击全选按钮时，如果它是被选中的，则让class名为checked的复选框全部选中；
3、单击所有的复选框按钮时，如果它被选中时，$(this).prop("checked", true) ; 否则，$(this).prop("checked", false);
4、遍历所有的复选框，首页先初始化一个值为0的变量，和定义一个数组一样，都是想要获取长度，如果被选中，则让它的变量值+1，然后再通过这个变量来进行逻辑的判断。