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

来源:互联网 发布:淘宝大学线下培训班 编辑:程序博客网 时间:2024/06/06 13:01

前端

一级选框全选/取消二级选框

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);                      }                      }                }
原创粉丝点击