checkbox的骚操作

最新推荐文章于 2023-01-13 17:45:00 发布
最新推荐文章于 2023-01-13 17:45:00 发布
阅读量526 收藏
点赞数
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z3133464733/article/details/80867773
版权 

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>案例管理</title>
<link rel="stylesheet" href="/css/common.css" />
<link rel="stylesheet" href="/css/bootstrapStyle.css" />
<link rel="stylesheet" href="/css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="/plugins/bootstrap-3.3.7-dist/css/bootstrap-theme.css" />
<link rel="stylesheet" type="text/css" href="/plugins/bootstrap-3.3.7-dist/css/bootstrap.css" />
<!-- 引入 自定义 样式 -->
<link rel="stylesheet" href="/plugins/zTree_v3/css/metroStyle/metroStyle.css" type="text/css">
<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
}

.row {
	margin: 0px auto;
	margin-bottom: 10px;
	padding: 5px;
}

.alert-info {
	text-align: center;
	background: #71b3c8;
	border: #e5e8e8;
	color: black;
}

._content div {
	margin: 0px;
}

._content ._tile {
	color: black;
	background-color: #4aa4bd;
	border: #9e9a9a;
}

._content ._height {
	height: 500px;
	overflow: auto;
}

._caseTitle {
	padding-top: 7px;
}
._caseText{
	padding-top: 7px;
	text-align: left;	
}
.patternCss,.stepCss {
	text-align: left;
	overflow: hidden;
	white-space: nowrap;
}

.patternCss:HOVER,.stepCss:HOVER {
	cursor: pointer;
}

._sure {
	color: white;
}

._sure:HOVER {
	cursor: pointer;
}
.showCZ:HOVER{
	cursor: pointer; 
}
.showCZ:HOVER .showCzBtn{
	display: inline!important;
}
button{
	opacity:0.3;
	height: 17px;
	padding: 0px;
	margin: 0px;
}
</style>
</head>
<body>
	<!--header start-->
	<div class="header">
		<div id="topPage"></div>
	</div>
	<!--header end-->
	<main class="container-fluid">
		<div class="m-top">
			<div>
				<a class="float_l" href=""><img src="/img/tittle.png" alt="tupian" /></a>
				<p class="float_l">案例 / 案例集管理 / 新增案例集</p>
			</div>
		</div>
		<div class="r-piece" style="width: 100%;padding: 0.5%">
			<div class="row alert alert-info">
				<div class="col-md-3 _caseTitle">
					归属项目:<span id="projectName">Ao01_xxqq</span>
				</div>
				<div class="col-md-3 _caseTitle">
					归属版本:<span id="versionName">qh_z0824</span>
				</div>
				<div class="col-md-6">
					<div class="col-md-3 _caseTitle">案例集名称:</div>
					<div class="col-md-9">
						<input type="text" class="form-control" id="suiteTile" placeholder="请输入">
					</div>
				</div>
			</div>
			<div class="row _content">
				<div class="col-md-4">
					<div class="row alert alert-info _tile">功能模块</div>
					<div class="row alert alert-info _height">
						<ul id="modules" class="ztree"></ul>
					</div>
				</div>
				<div class="col-md-4">
					<div class="row alert  _tile">
						<div class="col-md-4" style="text-align: left;">
							<input type="checkbox" id="checkedAll" name="checkedAll" />全选
						</div>
						<div class="col-md-4">案例列表</div>
						<div class="col-md-4 _sure" οnclick="_sure();";>确认选择</div>
					</div>
					<div class="row alert alert-info _height" id="cases"></div>
				</div>
				<div class="col-md-4">
					<div class="row alert alert-info _tile">已选案例列表</div>
					<div class="row alert alert-info _height" id="sureCases"></div>
				</div>
			</div>
			<div class="row" style="text-align: center;">
				<button type="button" class="btn btn-primary" οnclick="commitSuite();">保存</button>
				        
				<button type="button" class="btn btn-default" οnclick="goBack();">返回</button>
			</div>
		</div>
	</main>
</body>
<script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
<script src="/plugins/bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<!-- ztree -->
<script type="text/javascript" src="/plugins/zTree_v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/plugins/zTree_v3/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="/plugins/zTree_v3/js/jquery.ztree.exedit.js"></script>
<!-- paginator.js(分页) -->
<script type="text/javascript" src="/js/bootstrap-paginator.js"></script>
<!-- 封装的ajax请求 -->
<script type="text/javascript" src="/autotest/common-js/common.js"></script>
<!-- 对话框 -->
<script type="text/javascript" src="/autotest/common-js/dialog.js"></script>
<!-- 对应当前页面的js文件 -->
<script type="text/javascript" charset="utf-8" src="/autotest/autotest-js/module/module.js"></script>
<script type="text/javascript" src="/autotest/autotest-js/cases/add_suite.js"></script>
</html>
$("#topPage").load("/pages/commonPage/newTop.html");

/**
 * ztree相关操作
 */
// 定制ztreeSetting
var setting = {
	view : {
		showLine : false,
		selectedMulti : false
	},
	callback : {
		beforeDrag : beforeDrag,
		onClick: zTreeOnClick
	},
	data : {
		simpleData : {
			enable : true,
			idKey : "id",
			pIdKey : "parentid",
			rootPId : 0
		}
	}
};
// 禁止拖拽
function beforeDrag(treeId, treeNodes) {
	return false;
}
var cases=$("#cases");
var moduleIds={
	moduleIds:[]
};
//onclick
function zTreeOnClick(event, treeId, treeNode) {
	var ids=[];
	ids.push(treeNode.id);
	if(treeNode.id=='1'){
		ids=[];
	}
	moduleIds.moduleIds=ids;
	randerCases();
	//如果checkbox全部为选中，则让全选按钮选中
	var checkboxs=$("input[name='ck']:checkbox");
	if(checkboxs.lenght==0){
		$('[name=checkedAll]:checkbox').prop('checked', false);
	}
	var sureCasesLength=$("#sureCases").find("div").length;
	//点击模块时候如果确认的案例已经存在，则让checkbox选中
	if(sureCasesLength>0){
		$("#sureCases").find("div").each(function(){
			var sueredId=$(this).attr("data-id");
			$("input[name='ck']:checkbox").each(function() {
				if(sueredId==$(this).val()){
					$("#ck"+$(this).val()).prop("checked",true);
				}
			});
		});
		var checked = $("input[name='ck']:checked");
		if(checkboxs.length==checked.length&&checkboxs.length!=0){
			$('[name=checkedAll]:checkbox').prop('checked', true);
		}
	}
}
//加载案例列表
var randerCases=function(){
	if(moduleIds.moduleIds.length==0){
		moduleIds.moduleIds.push(-1);
	}
	$.hsf.ajaxGet("/cases/getCasesByModuleIds",moduleIds, false, function(result) {
		if (result.messageCode == 1) {
			cases.empty();
			var strs="";
			$.each(result.details,function(index,item){
				strs+="<div style='text-align:left;margin-top:1%' οnclick='ckck(this)';><input id='ck"+item.id+"'  type='checkbox' name='ck' value='"+item.id+"'/>"+item.name+'</div>';
			});
			cases.append(strs);
		}
	});
	$('[name=checkedAll]:checkbox').prop('checked', false);
};

$(function() {
	initTree(setting);
	randerCases();
});

$("#checkedAll").change(function(){
	if($(this).is(":checked")){
		$('[name=ck]:checkbox').prop('checked', true);
	}else{
		$('[name=ck]:checkbox').prop('checked', false);
	};
});
//点击一个
function ckck(obj) {
	var checkBoxslength=$("input[name='ck']:checkbox").length;
	var checkedlength = $("input[name='ck']:checked").length;
	if(checkBoxslength==checkedlength){
		$('[name=checkedAll]:checkbox').prop('checked', true);
	}else{
		$('[name=checkedAll]:checkbox').prop('checked', false);
	}
}
var sureCasesIds=[];
//确认选择
var _sure=function(){
	var sureCasesLength=$("#sureCases").find("div").length;
	var sureIds=[];
	if(sureCasesLength>0){
		$("#sureCases").find("div").each(function(){
			var sureId=$(this).attr("data-id");
			sureIds.push(sureId);
		});
	}
	$("input[name='ck']:checkbox").each(function() {
		if ($(this).is(':checked')) {
			var checkId=$(this).val();
			var index_=$.inArray(checkId, sureIds);
			if(index_==-1){
				var content=$(this).parent().text();
				var str="<div class='showCZ' data-id="+checkId+"  style='text-align:left;margin-top:1%;'>"+content;
				str+=" <button type='button' οnclick='_move(this);'  style='border:none;display:none' class='btn-group btn-group-sm showCzBtn'> <i class='fa fa-trash-o'></i> </button>";
				str+=" <button type='button' οnclick='_up(this);'    style='border:none;display:none' class='btn-group btn-group-sm showCzBtn'> <i class='fa fa-arrow-up'></i> </button>";
				str+=" <button type='button' οnclick='_down(this)';  style='border:none;display:none' class='btn-group btn-group-sm showCzBtn'> <i class='fa fa-arrow-down'></i> </button>";
				str+="</button>";
				str+="<div>";
				$("#sureCases").append(str);
				sureCasesIds.push(checkId);
			}
		}
		if($(this).is(':checked')==false){
			var checkId=$(this).val();
			$("#sureCases").find("div").each(function(){
				var sureId=$(this).attr("data-id");
				if(checkId==sureId){
					$(this).remove();
				}
			});
		}
	});
	var mainContainer =$("#sureCases");
	var scrollToContainer = mainContainer.find('div:last');
	if(typeof(scrollToContainer.offset())!="undefined"){
		mainContainer.animate({
			scrollTop : scrollToContainer.offset().top - mainContainer.offset().top+ mainContainer.scrollTop()
		}, 2000);// 2秒滑动到指定位置
	};
}
//移除
var _move=function(obj){
	var div_data_id=$(obj).parent().attr("data-id");
	$("input[name='ck']:checkbox").each(function() {
		if($(this).is(":checked")){
			$("#ck"+div_data_id).prop("checked",false);
			$('[name=checkedAll]:checkbox').prop('checked', false);
		}
	});
	$(obj).parent().remove();
}
//up
var _up=function(obj){
	var currentDiv=$(obj).parent();
	var prevDiv=currentDiv.prev();
	if(typeof(prevDiv.html())=='undefined'){
		showMsg("已经是第一个了!");
	}else{
		currentDiv.insertBefore(prevDiv);
		prevDiv.insertAfter(currentDiv);
	};
}
//down
var _down=function(obj){
	var currentDiv=$(obj).parent();
	var nextDiv=currentDiv.next();
	if(typeof(nextDiv.html())=='undefined'){
		showMsg("已经是最后一个了!");
	}else{
		currentDiv.insertBefore(nextDiv);
		nextDiv.insertBefore(currentDiv);
	};
}

var commitSuite=function(){
	var suiteTile=$("#suiteTile").val();
	if(suiteTile==""){
		showMsg("请填写案例集名称!");
		return false;
	}
	var sureCaseLength= $("#sureCases").find("div").length;
	if(sureCaseLength==0){
		showMsg("请至少选择一条案例!");
		return false;
	};
	//添加案例集操作
	var params={
		name:suiteTile,
		suiteCases:[]
	};
	var cases=[];
	var i=1;
	$("#sureCases").find("div").each(function(){
		var cas = {
			caseId : '',
			name : '',
			sortIndex:''
		};
		if($(this).attr("data-id")>0){
			cas.sortIndex=i++;
			cas.caseId=$.trim($(this).attr("data-id"));
			cases.push(cas);
		}
	});
	params.suiteCases=cases;
	//提交
	$.hsf.ajaxPostT("/caseSet/addSuite",JSON.stringify(params),false,function(result){
		if(result.messageCode==1){
			showMsg("保存案例集成功!");	
			window.location.href="/pages/cases/suite.html";
		}
	});
}
var goBack=function(){
	window.location.href="/pages/cases/suite.html";
}


日进斗识
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
LeetCode-47.全排列Ⅱ、深度优先搜索
编程猿来如此
09-18 132
深度优先搜索 深度优先搜索（DFS）就是在每一步时对每一种可能的选择一条道走到底，然后再回过头尝试另外一种选择。 深度优先搜索的关键是要考虑“当前这一步”该如何做，至于“下一步”该怎么做和当前这一步的解决方法是一样的。在进行当前步的选择之前要确定已经做出的选择列表，然后在剩余可供选择的每一种可能进行遍历，对于每一种选择将选择结果以及选择状态代入下一步操作，然后再次进行深度优先搜索。 DFS 实现 DFS的实现考虑要以下几个问题即可： ①．边界范围：即搜索终止条件，递归结束条件。 ②．可供选择的范围列表：所.
springboot+thymeleaf 复选框及内容处理
lswMasic的博客
01-26 2274
前端页面设置代码： <td> <!--多选框--> <input type="checkbox" name="parkingList" th:value="${parkingInfos.getPno()}" th:text="${parkingInfos.getPno()}" > </td> 展示效果如下： 在后端对于复选框的参数及内容处理，获得复选框中选中内容办法： /* 车位信息批量管理 修改销售状态 */ @RequestMapp
获取所有选中的checkboxs的值
小基炖蘑菇.
06-28 421
<input type="checkbox" name="checkboxs" value="值" id="checkboxs" /> obj = document.getElementsByName("checkboxs"); check_val = []; for(k in obj){ if(obj[k].checked) check_val.push(obj[k].value); } b = check_val.join(","); //字符串 获取所有选中的chec.
bootstrap+springboot获取勾选以后的值
Jeremz的博客
06-10 559
1.获取勾选值 function exportRow(){ table.set(); $.modal.confirm("确定导出选择的数据吗？", function() { var data = $("#" + table.options.id).bootstrapTable('getSelections'); var woNums = []; for(var i
Android开发之Compose基础学习-CheckBox勾选控件基本用法
xiayiye5的博客
10-08 1188
【代码】Android开发之Compose基础学习-CheckBox勾选控件基本用法。
JQuery对checkbox操作 （循环获取）
10-28
下面是Jquery对checkbox的一些操作，全选，反选，取消全选等等.
JS checkbox控制操作代码
01-19
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 例二： 要实现的功能如图所示： 全选的checkbox的js代码如下： var status=true; function allselect(){ var tags=document.getElementsByTagName(“input”); for ...
jquery操作checkbox示例分享
10-25
主要介绍了jquery操作checkbox,需要的朋友可以参考下
自定义checkbox与button操作
05-26
当checkbox没有被勾选的时候按钮不能被点击和操作颜色为默认，checkbox被勾选，button颜色发生变化且可以被点击
checkbox选中触发事件_彻底搞懂拖拽——基于鼠标事件的拖拽以及基于HTML5 API的拖拽
weixin_39955142的博客
11-21 620
一、基于鼠标事件的拖拽原理——onmousedown、onmousemove、onmouseuponmousedown该事件会在鼠标按键被按下时触发支持该事件的HTML标签：html <a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <...
checkbox-example：Spring Boot复选框示例
02-24
复选框示例 通过以下命令运行此项目： mvn clean spring-boot:run 截屏 添加新用户 列出所有用户
鼠标选拖拽
12-13
jquery实现鼠标拖拽，完整实现左右拖拽并且选择功能
checkbox鼠标拖拽框选
09-25
鼠标拖拽出一个矩形，矩形范围内的checkbox将被选中。类似windows 框选文件一样
jquery实现鼠标拖拽选择
01-13
jquery实现鼠标拖拽，完整实现左右拖拽并且选择功能，如果感觉实用，请评论.谢谢！
element-ui利用el-checkbox实现表格拖拽排序功能
piaocanY的博客
05-17 2382
页面要做成这种 chechkbox 能进行拖拽的，并且选中当前行一个虚线效果 借助了 awe-add 这个插件进行实现的 使用： 1：下载： npm install awe-add --save 2：在main.js里面进行应用 import VueDND from 'awe-dnd' Vue.use(VueDND) 3：html部分 <el-card> <div v-show="redundantListShow" @mou.
checkbox拖动排序
no_one_but_you的博客
02-09 883
先下载依赖包 // 通过npm安装 $ npm install awe-dnd --save 在main.js里使用vue.use使用 // checkbox拖动调整顺序 import VueDND from 'awe-dnd' Vue.use(VueDND) 在vue2中使用 <el-checkbox-group v-model="checkData" @change="cancelSelect"> <el-checkbox v-for="item in h
checkbox全选，js实现
zlh13854157321的博客
08-10 367
// 全选/全不选 function checkAll() { // 用jquery获取name为checkboxs的多选按钮 var checkBoxs = $("[name='checkboxs']"); // 判断id为checkbox的按钮是否被选中（假设此按钮为全选） if ($('#checkbox').get(0).checked == tru
checkbox常用操作
metecyu的专栏
08-01 1528
全选 function SelectAll(checked,checkbox_id) { var checkboxs=document.getElementsByName(checkbox_id); for (var i=0;i<checkboxs.length;i++) { var e=checkboxs[i]; e.checked=checked; } } 反向选
SpringBoot + Spring Security 学习笔记记住我功能实现
Candour_0的博客
01-13 221
SpringBoot + Spring Security 学习笔记记住我功能实现
listview checkbox
最新发布
09-10
在这个例子中，通过在ListView的每个条目中添加一个CheckBox，当用户点击CheckBox时，可以记录用户的选择操作。在实现中，可以在getView方法中进行相应的操作。首先，在getView方法中获取CheckBox的引用，并设置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值