bootstrap 框架中 jquery对表的操作 1

表格结构：

1.HTML代码

        
"row">
            
"col-md-4 col-md-offset-4">
                "tb" class="table table-bordered table-hover">
                    "active">
                        "success">
                        "warning">
                        "danger">
                        "info">
                        

                     
"active" id="btn">
                         
 "checkbox" class="box1" /> 
                        
姓名
                        
年龄
                        
操作
                    
                    
"in"> "checkbox" class="box" /> 
                        
"name">陈涛
                        
"age">18
                        
"#" class="del">删除内容 ;"#" class="update">修改内容 ;"#" class="delete">刪除整行
                    
                    
"in"> "checkbox" class="box" /> 
                        
"name">李杨
                        
"age">19
                        
 "#" class="del">删除内容 ;"#" class="update">修改内容 ;"#" class="delete">刪除整行 
                    
                    
"in"> "checkbox" class="box" /> 
                        
"name">王虎
                        
"age">20
                        
"#" class="del">删除内容 ;"#" class="update">修改内容 ;"#" class="delete">刪除整行
                    
                    
"in"> "checkbox" class="box" /> 
                        
"name">徐飘
                        
"age">20
                        
"#" class="del">删除内容 ;"#" class="update">修改内容 ;"#" class="delete">刪除整行
                    
                    
选项
                         
 "button" id="btn4" value="查询" />
                         
 "button" id="btn0" value="添加" />
                         

                            
                             "button" id="btn1" value="全选" />
                             "button" id="btn2" value="反选" />
                             "button" id="btn3" value="全不选" />
                        
                     
   
                    
                    
            
        
    

2. 页面效果

主要功能有：
点击全选，所有checkbox的状态为：checked属性为false；
点击全不选，所有checkbox的状态为：checked属性为true；
点击反选，checkbox的状态取反，而且需要单独判断，最上面的checkbox，
点击最上面的checkbox，下面的checkbox全选或者全不选。

3.事件绑定

3.1 全选事件

 $("#btn1").on("click", function() {
                    $("input[type='checkbox']").prop("checked", true);
                });

3.2 全不选事件

   $("#btn3").on("click", function() {
                    $("input[type='checkbox']").prop("checked", false);
                });

3.3 反选事件

  $("#btn2").on("click", function() {
                    var boxs = $(".box");
                    var box1 = $(".box1");
                    for (var i = 0; i < boxs.length; i++) {
                        if (boxs[i].checked == false) {
                            boxs[i].checked = true;
                        } else {
                            boxs[i].checked = false;
                        }
                    };
                    if ($(".box:checked").length == $(".box").length) {
                        // console.log(box1[0].checked);
                        if (box1[0].checked == false) {
                            box1.prop("checked", true);
                        } else {
                            box1.prop("checked", false);
                        }
                    } else {
                        box1.prop("checked", false);
                    }
                });

3.4 box1事件

   $(".box1").on("click", function() {
                    var boxs = $(".box");
                    if ($(".box1")[0].checked == true) {
                        for (var i = 0; i < boxs.length; i++) {
                            boxs[i].checked = true;
                        }
                    } else {
                        for (var i = 0; i < boxs.length; i++) {
                            boxs[i].checked = false;
                        }
                    }
                });

3.5 点击下面每个box，当全部选择时，box1为选择状态

    var boxs = $(".box");
                boxs.on("click", function() {
                    var box1 = $(".box1");
                    var count = 0;
                    for (var i = 0; i < boxs.length; i++) {
                        if (boxs[i].checked == true) {
                            count = count + 1;
                            // console.log(count);
                        }
                        if (count == boxs.length) {
                            box1.prop("checked", true);
                        } else {
                            box1.prop("checked", false);
                        }
                    };
                });

删除，修改，增加功能见下一篇文章链接

https://blog.csdn.net/weixin_44129913/article/details/101602985