功能介绍
 
整个复选框是包含多级,可能有父级,可能有子级,在勾选复选框时,要做两种判断:
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实现多级复选框的交互的更多相关文章

  1. 模拟多级复选框效果的jquery代码

    jquery做了个多级复选框的效果,代码总共就20+行就over了. 我又想用js来做一个看看,才写了几个方法就写不动了,兼容性要考虑很多,而且代码量直线上升. 主要分享下jquery的这个效果的实现 ...

  2. 模拟多级复选框效果--jquery

    今天又次体会到jquery的强大了,做了个多级复选框的效果,代码总共就20+行就over了. 我又想用js来做一个看看,才写了几个方法就写不动了,兼容性要考虑很多,而且代码量直线上升. 主要分享下jq ...

  3. js获取checkbox复选框获取选中的选项

    js获取checkbox复选框获取选中的选项 分享下javascript获取checkbox 复选框获取选中的选项的方法. 有关javascript 获取checkbox复选框的实例数不胜数.js实现 ...

  4. Js动态添加复选框Checkbox

    Js动态添加复选框Checkbox的实例方法!!! 首先,使用JS动态产生Checkbox可以采用如下类似的语句: var checkBox=document.createElement(" ...

  5. 用js判断一个复选框是否被选中

    <html> <head>        <title>            复选框全选.全不选.反选.必选一个        </title>    ...

  6. js自定义修改复选框单选框样式,清除复选框单选框默认样式

    之前做项目的时候,也遇到过需要按照设计稿把<input type="checkbox">和<input type="radio">的默认 ...

  7. 原生js实现三级复选框

    工作中要做一个三级的复选框,用js实现了一下,从项目中把相关代码抽取出来了,有相关需求的可以参考一下.亲测可用. <!DOCTYPE html> <html> <head ...

  8. js操作checkbox(复选框)的方法总结

    收集了一些用js代码操作checkbox复选框的代码,分享出来,供需要的朋友参考: <script> //复选框checkbox 处理方法 //搜集整理 www.jbxue.com fun ...

  9. JS获取页面复选框选中的值

    function jqchk(){ //jquery获取复选框值 var chk_value =[]; $('input[class="sel"]:checked').each(f ...

随机推荐

  1. SAP系统中ASCS、ERS、PAS、AAS

    SAP系统中ASCS.ERS.PAS.AAS是什么: ASCS:ABAP Central services instance (Message server) PAS: Primary applica ...

  2. JUC 之 ThreadPoolExecutor 的一些研究

    ThreadPoolExecutor 概述:===================================================================== 构造函数: 4个 ...

  3. ssh 第一次登录输入yes 问题

    #!/bin/bash for i in hadoop01 hadoop02 hadoop03 hadoop04 hadoop05 hadoop06 hadoop07 hadoop08 hadoop0 ...

  4. 混合式应用真机调试(Android Studio + Chrome)

    如何在chrome上调试混合式APP https://developers.google.com/web/tools/chrome-devtools/remote-debugging/ Get Sta ...

  5. png格式的图片在IE6 下透明解决方案

    FF和IE7已经直接支持透明的png图了,下面这个主要是解决IE6下透明PNG图片有灰底的 style="FILTER: progid:DXImageTransform.Microsoft. ...

  6. ubuntu14.04 rabbitmq安装与使用 --修改RabbitMQ数据存储位置

    参考:https://blog.csdn.net/tianjiewang/article/details/58383062 说明: ubuntu14.04   rabiitmq 默认 安装路径 /va ...

  7. Dom对象和jQuery对象的相互转化

    01.jQuery对象 1.jQuery对象就是通过对jQuery包装dom对象后产生的对象. 2.虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DO ...

  8. Servlet基本_Filter

    1.概念・サーブレットフィルタとは.サーブレットやJSPの「共通の前後処理」を記述するための仕組みです.・フィルタはサーブレットやJSPの前に位置し.実行前と後に.リクエスト.レスポンスに対して任意の ...

  9. DO and DOES Reduction

    DO and DOES Reduction Share Tweet Share Tagged With: DO and DOES Reductions ‘Do’ and ‘does’ can be r ...

  10. 利用官方的vue-cli脚手架来搭建Vue集成开发环境

    在利用vue-cli脚手架搭建vue集成环境之前,我们需要先安装nodejs的环境.如果在cmd中输入node --version和npm --version出现如下的版本信息,就说明安装已经成功了. ...