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>
<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实现多级复选框的交互的更多相关文章
- 模拟多级复选框效果的jquery代码
jquery做了个多级复选框的效果,代码总共就20+行就over了. 我又想用js来做一个看看,才写了几个方法就写不动了,兼容性要考虑很多,而且代码量直线上升. 主要分享下jquery的这个效果的实现 ...
- 模拟多级复选框效果--jquery
今天又次体会到jquery的强大了,做了个多级复选框的效果,代码总共就20+行就over了. 我又想用js来做一个看看,才写了几个方法就写不动了,兼容性要考虑很多,而且代码量直线上升. 主要分享下jq ...
- js获取checkbox复选框获取选中的选项
js获取checkbox复选框获取选中的选项 分享下javascript获取checkbox 复选框获取选中的选项的方法. 有关javascript 获取checkbox复选框的实例数不胜数.js实现 ...
- Js动态添加复选框Checkbox
Js动态添加复选框Checkbox的实例方法!!! 首先,使用JS动态产生Checkbox可以采用如下类似的语句: var checkBox=document.createElement(" ...
- 用js判断一个复选框是否被选中
<html> <head> <title> 复选框全选.全不选.反选.必选一个 </title> ...
- js自定义修改复选框单选框样式,清除复选框单选框默认样式
之前做项目的时候,也遇到过需要按照设计稿把<input type="checkbox">和<input type="radio">的默认 ...
- 原生js实现三级复选框
工作中要做一个三级的复选框,用js实现了一下,从项目中把相关代码抽取出来了,有相关需求的可以参考一下.亲测可用. <!DOCTYPE html> <html> <head ...
- js操作checkbox(复选框)的方法总结
收集了一些用js代码操作checkbox复选框的代码,分享出来,供需要的朋友参考: <script> //复选框checkbox 处理方法 //搜集整理 www.jbxue.com fun ...
- JS获取页面复选框选中的值
function jqchk(){ //jquery获取复选框值 var chk_value =[]; $('input[class="sel"]:checked').each(f ...
随机推荐
- SAP系统中ASCS、ERS、PAS、AAS
SAP系统中ASCS.ERS.PAS.AAS是什么: ASCS:ABAP Central services instance (Message server) PAS: Primary applica ...
- JUC 之 ThreadPoolExecutor 的一些研究
ThreadPoolExecutor 概述:===================================================================== 构造函数: 4个 ...
- ssh 第一次登录输入yes 问题
#!/bin/bash for i in hadoop01 hadoop02 hadoop03 hadoop04 hadoop05 hadoop06 hadoop07 hadoop08 hadoop0 ...
- 混合式应用真机调试(Android Studio + Chrome)
如何在chrome上调试混合式APP https://developers.google.com/web/tools/chrome-devtools/remote-debugging/ Get Sta ...
- png格式的图片在IE6 下透明解决方案
FF和IE7已经直接支持透明的png图了,下面这个主要是解决IE6下透明PNG图片有灰底的 style="FILTER: progid:DXImageTransform.Microsoft. ...
- ubuntu14.04 rabbitmq安装与使用 --修改RabbitMQ数据存储位置
参考:https://blog.csdn.net/tianjiewang/article/details/58383062 说明: ubuntu14.04 rabiitmq 默认 安装路径 /va ...
- Dom对象和jQuery对象的相互转化
01.jQuery对象 1.jQuery对象就是通过对jQuery包装dom对象后产生的对象. 2.虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DO ...
- Servlet基本_Filter
1.概念・サーブレットフィルタとは.サーブレットやJSPの「共通の前後処理」を記述するための仕組みです.・フィルタはサーブレットやJSPの前に位置し.実行前と後に.リクエスト.レスポンスに対して任意の ...
- DO and DOES Reduction
DO and DOES Reduction Share Tweet Share Tagged With: DO and DOES Reductions ‘Do’ and ‘does’ can be r ...
- 利用官方的vue-cli脚手架来搭建Vue集成开发环境
在利用vue-cli脚手架搭建vue集成环境之前,我们需要先安装nodejs的环境.如果在cmd中输入node --version和npm --version出现如下的版本信息,就说明安装已经成功了. ...