js实现多级复选框的交互

Posted 每天1990

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js实现多级复选框的交互相关的知识,希望对你有一定的参考价值。

功能介绍
 
整个复选框是包含多级,可能有父级,可能有子级,在勾选复选框时,要做两种判断:
1要判断它下面有没有子级,有子级将子级的选中状态checked变得和自己一样。
2要判断它是否有父级,有父级勾选时判断同级兄弟是否都是选中状态,如果选中将父级勾选上;取消勾选时将父级的勾选状态变为false
 
复选框交互要实现的效果如下:
 
 
实现思路说明
 
1.设计一种方式让我们知道谁是自己的父级谁是自己的子级。我是用的<input>的name和id值标识的。子级的name值等于父级的id值
2.checkone(),递归操作父级,当前checked=false,所有父级设置为false。当前checked=true,递归判断父级的所有自己是否都选中了,如果是就将父级的checked=true
3.check(),check one操纵父级,同时递归操作当前元素的子级全选或全取消
4.submittestsuit()提交功能,遍历所有<input>,将所有checked=true,且id为testcase的提交,id可以自己定义(因为我需求只要最末级的case的值)
 
复选框JS代码如下:
<script type="text/javascript">
     function checkone(element){
        var checkstatus=element.checked
        var checkid=element.id
          var checkname=element.name
          if (checkstatus == false && document.getElementById(checkname)){
              document.getElementById(checkname).checked=checkstatus//document.getElementById(checkname)表示全选按钮
          }
          else if (document.getElementById(checkname)){
              var samelevelgroup=document.getElementsByName(checkname)
              var allchecked=true
              for (var i=0;i<samelevelgroup.length;i++){
                  if (samelevelgroup[i].checked==false){
                      allchecked=false
                  }

              }
              if ( allchecked==true ){
                      document.getElementById(checkname).checked=true
                  }
          }
          if (document.getElementById(checkname)){
              checkone(document.getElementById(checkname))
          }
    }
     function check(element)
      {
{#          全选用id,全选下面的复选框用name对应#}
        var checkstatus=element.checked
        var checkid=element.id

          checkone(element)
          var checkgroups_down=document.getElementsByName(checkid)
        for (var i = 0; i < checkgroups_down.length; i++)
        {
          checkgroups_down[i].checked=checkstatus
            var childid= checkgroups_down[i].id
            if (document.getElementsByName(childid).length>1){//如果下面有name和自己的id一致,就认为这是分组全选,下面还有子项
                check(document.getElementById(childid))
            }
        }
      }
     function submittestsuit() {
          var allcase=document.getElementsByTagName("input")
          var selectcase=[]
          for (var i=0;i<allcase.length;i++){
              if ((allcase[i].checked == true) && (allcase[i].id == "testcase")) {

                  var filename=allcase[i].parentNode.previousSibling.previousSibling.innerhtml
                  var functionname=allcase[i].parentNode.previousSibling.previousSibling.previousSibling.previousSibling.innerHTML
{#                  alert(functionname)#}
                  var caseinfo = {
                    functionname:functionname,
                    filename:filename
                    }
                  selectcase.push(caseinfo)
              }

          }
          if (selectcase.length < 1){
              alert("至少选择一个case!")
          }
          else{
              $.ajax({
                    cache: true,
                    type: "POST",
                    url:"{% url "save_testsuit" %}",
                    data:{caseinfos:JSON.stringify(selectcase)},// 你的formid
                    async: false,
                    error: function(request) {
                        alert("保存失败");
                    },
                    success: function(data) {
                        if(data.respcode==0){
                            alert("测试套件已生成");
                            var w = window.open();
                            w.location=("{% url "runtestinfo" %}")
                        }
                        else{
                            alert(JSON.stringify(selectcase))
                            alert(data.msg);
                        }
                    }
                    });
          }

      }
</script>
 
 
复选框HTML代码如下:
 
主要是把<input>子级和父级的name和id值对应一样即可
 
<div style="margin-bottom: 10px">
        <span style="margin-left: 10px">全选所有case </span>
        <input type="checkbox" id="groupcheck" onclick="check(this)">
    </div>
    <div>
        <table class="table table-hover">
            <tr style="background-color: #5bc0de">
                <th>用例描述</th>
                <th>测试方法名</th>
                <th>所属文件</th>
                <th>勾选要执行的用例</th>
            </tr>
{#            全选是根据name和id进行联动的,上级的id和下级的name要一致#}
            {% for group in testcaselist.testcaseslist %}
            <tr style="background-color: #9acfea">
                <th>
                    <span>{{ group.groupname }}</span>
                    <span><input id="{{ group.groupname }}" name="groupcheck" type="checkbox" onclick="check(this)"></span>
                </th>
            </tr>

            {% for testcase in group.testcase %}
            <tr>
                <td width="35%">{{ testcase.desc }}</td>
                <td width="30%" id="functionname">{{ testcase.functionname }}</td>
                <td width="20%" id="filename">{{ testcase.filename }}</td>
                <td width="15%"><input id="testcase" name="{{ group.groupname }}" type="checkbox" onclick="check(this)"></td>
            </tr>
            {% endfor %}

            {% endfor %}
 
        </table>
    </div>
    <div style="margin-top: 20px">
        <button type="button" class="btn btn-default" onclick="submittestsuit()">生成测试套件</button>

    </div>
 

 

 

以上是关于js实现多级复选框的交互的主要内容,如果未能解决你的问题,请参考以下文章

多级勾选框联动核心js

iOS 动态树形结构 - 实现多级菜单,附带复选框功能

JS学习笔记: 使用原生JS 实现导航栏下多级分类弹出效果

更快实现Android多级树形选择列表

anime.js 实战:实现一个带有描边动画效果的复选框

layer ui使用多层弹框时,各个页面交互问题