js实现多选框分类全选与取消

这篇博客探讨了如何在前端使用JavaScript实现多选框的全选和取消全选功能,包括一级选框对二级选框的影响,以及后台动态生成选框和检查所有选框的选中状态。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前端

一级选框全选/取消二级选框
function pcheck(j)
{
    var ch=document.getElementsByName("name"+j);
    if(document.getElementsByName("name"+j)[0].checked==true)
    {
        for(var i=0;i<ch.length;i++)
        {
            ch[i].checked=true;
        }
    }else{
            for(var i=0;i<ch.length;i++)
            {
                ch[i].checked=false;
            }
     }
}
当二级被选时,选择/取消一级选框
function ccheck(obj)
{
   var ch=document.getElementsByName($(obj).attr("name"));
   if(obj.checked==true){
        ch[0].checked=true;
    }else{

         var flag=false;
         for(var i=1;i<ch.length;i++){
           if(ch[i].checked==true){
               flag=true;
           } 
          }
           if(flag){
                ch[0].checked=true;
           }else{
                ch[0].checked=false;
           }

    }
}   
后台动态生成选框
        StringBuffer htmlstr = new StringBuffer();
        htmlstr.append("<dl>");
        String[] title = { "标题一", "标题二, "标题三", "标题四" };
        for (int i = 1; i < 5; i++) {

            htmlstr.append("<dd class=\"model\"><label for=\"permit_wechat\">"
                    + title[i - 1] + "</label></dd>");
            @SuppressWarnings("rawtypes")

            if (parent != null) {
                for (int j = 0; j < parent.size(); j++) {
                    htmlstr.append("<dd class=\"model\">");
                    htmlstr.append("<input name=\"name"
                            + parent.get(j).get("code")
                            + "\" type=\"checkbox\" class=\"test\" onclick=\"pcheck("
                            + parent.get(j).get("code") + ")\" id=\""
                            + parent.get(j).get("code") + "\" value=\""
                            + parent.get(j).get("code") + "\">");
                    htmlstr.append("<label for=\"permit_wechat\">"
                            + parent.get(j).get("name") + "</label></dd>");

                    htmlstr.append("<dd class=\"module\">");

                    if (child != null) {
                        for (int m = 0; m < child.size(); m++) {
                            htmlstr.append("<input name=\"name"
                                    + parent.get(j).get("code")
                                    + "\" type=\"checkbox\" class=\"test\"            onclick=\"ccheck(this)\" value=\""
                                    + child.get(m).get("code") + "\"" + "id=\""
                                    + child.get(m).get("code") + "\">");
                            htmlstr.append("<label for=\"permit_wechat\">"
                                    + child.get(m).get("name") + "</label>");

                        }
                    }
                    htmlstr.append("</dd>");
                }
            }
        }
        htmlstr.append("</dl>");
选择所有选框的选中情况
              var checkboxArray = [];//初始化空数组,用来存放checkbox对象。
              var map = {}; 
              var inputs = document.getElementsByTagName("input");//获取所有的input标签对象
              for(var i=0;i<inputs.length;i++){
                  var obj = inputs[i];
                  if(obj.type=='checkbox'){
                      if(obj.checked==true){
                        checkboxArray.push(obj.value);
                      }    
                  }
                }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值