复选框jQuery

最新推荐文章于 2020-09-27 13:25:20 发布

广东话的蛇皇

最新推荐文章于 2020-09-27 13:25:20 发布

阅读量182

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43618136/article/details/104347772

版权

前端专栏收录该内容

352 篇文章 1 订阅

订阅专栏

复选框jQuery

    $(function () {

      //全选和全不选
      //获取thead中的复选框,获取他的这个选中的状态

//      $("#j_cbAll").click(function () {
//        //获取当前的复选框的选中状态
//        var flag= $(this).prop("checked");
//        //判断选中状态
//        if(flag){
//          $("#j_tb").find("input").prop("checked",true);
//        }else{
//          $("#j_tb").find("input").prop("checked",false);
//        }
//      });


      //thead标签中的复选框----全选和全不选
      $("#j_cbAll").click(function () {
        //直接设置tbody中复选框的选中状态和当前点击的复选框的选中状态一致
        $("#j_tb").find("input").prop("checked",$(this).prop("checked"));
      });


      //每个复选框都要注册点击事件
      $("#j_tb").find("input").click(function () {
        //先获取所有的复选框的个数
        var ckLength=$("#j_tb").find("input").length;
        //获取所有选中的复选框的个数
        var checkedLenth=$("#j_tb :checked").length;
        //console.log(ckLength+"====="+checkedLenth);//测试代码
//        if(ckLength==checkedLenth){
//          $("#j_cbAll").prop("checked",true);
//        }else{
//          $("#j_cbAll").prop("checked",false);
//        }
        $("#j_cbAll").prop("checked",checkedLenth==ckLength);
      });


    });