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>