关于JQuery复选框的全选与全不选及相关功能操作

我不是女神ヾ 2022-05-21 04:20 122阅读 0赞

## 关于JQuery复选框的全选与全不选及相关功能操作\#\# ##

--------------------

web开发中经常碰见关于“复选框”选中和不选中的需求以及对应的相关操作，这里记录一下，方便日常使用！

**父类选择**

**下属子类**

**具体实现（全选/全不选）**

$(function() {
         
            $("#checkall").click(function() {
        
                var nn = $("#checkall").is(":checked");
                if(nn == true) {
                     var namebox = $("input[name^='items']");  //获取name值为boxs的所有input
                     for(var i = 0; i < namebox.length; i++) {
                         namebox[i].checked=true;    //js操作选中checkbox
                     }
                 }
                 if(nn == false) {
                     var namebox = $("input[name^='items']");
                     for(var i = 0; i < namebox.length; i++) {
                         namebox[i].check        }
                 }
            })
    });

**应用逻辑（功能实现）**

$(function(){
        
            $("#deleteAll").click(function(){
        
                var chk_value =[]; 
                $('input[name="items"]:checked').each(function(){
         //遍历复选框
                    chk_value.push($(this).val()); 
                }); 
                if(chk_value.length==0){
                    alert("你还没有选择任何内容！");
                    return false;
                }
                //参数：var data = chk_value.toString();   唯一标识（ID）字符串（"a,b,c…"）
                /* 业务逻辑（异步/同步提交） */ 
            });
        });