js實現多級複選框的互動

標籤：ring   ajax   lis   等於   run   標識   說明   style   upn   

功能介紹 整個複選框是包含多級，可能有父級，可能有子級，在勾選複選框時，要做兩種判斷：1要判斷它下面有沒有子級，有子級將子級的選中狀態checked變得和自己一樣。2要判斷它是否有父級，有父級勾選時判斷同級兄弟是否都是選中狀態，如果選中將父級勾選上；取消勾選時將父級的勾選狀態變為false  複選框互動要實現的效果如下:   實現思路說明 1.設計一種方式讓我們知道誰是自己的父級誰是自己的子級。我是用的<input>的name和id值標識的。子級的name值等於父級的id值2.checkone()，遞迴操作父級，當前checked=false，所有父級設定為false。當前checked=true，遞迴判斷父級的所有自己是否都選中了，如果是就將父級的checked=true3.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實現多級複選框的互動