首页 > 代码库 > js实现多级复选框的交互
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实现多级复选框的交互
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。