checkbox运用

百味苦
于 2018-12-28 16:45:15 发布
阅读量203
点赞数
分类专栏： js，JQuery 文章标签： checkbox运用
本文链接：https://blog.csdn.net/qq_38026437/article/details/85327536
版权
js，JQuery 专栏收录该内容
36 篇文章 0 订阅
订阅专栏
做一个简单，复选框事件。
<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/general.css"/>
		<style type="text/css">
			
			.mui-content{
				background-color: #F2F2F2;
			}
			
			.content{
				width: 100%;
				background-color: #F2F2F2;
				padding: 10px;
			}
			.search{
				display: flex;
				justify-content: center;
				align-content: center;
				padding: 10px;
				background-color: white;
			}
			.stext{
				width: 25%;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				border-right:1px solid #C7C7CC;
			}
			.simg{
				width: 30px;
				height: 30px;
			}
			.simg>img{
				width: 100%;
				height: 100%;
			}
			.ssdiv{
				width: 75%;
			}
			.ssinp{
				width: 100%;
				height: 100%;
				border: 0;
				padding-left: 10px;
			}
			::-webkit-input-placeholder{
				font-size: 0.8em;
				color: #999999;
			} 
			.sjx{
				margin: auto;
				width: 0;
				height: 0;
			    border:10px solid transparent;
				border-top: 10px solid #000000;
				position: relative;
				top: 20%;
			}
			.cancell{
				width: 100%;
				padding: 10px;
			}
			.checklist{
				background-color: white !important;
				border-radius: 0.5em;
				margin: 5px auto;
			}
			.toptext{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 2px;
				
			}
			.fs1{
				font-size: 1em;
			}
			.fs08{
				font-size: 0.8em;
			}
			.fs07{
				font-size: 0.7em;
			}
			
			
			
			
.footdiv{
				position: fixed;
				bottom: 0;
				width: 100%;
				height: 3.4em;
				background-color: white;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.gd{
				height: 3.4em;
				width:100% ;
			}
			.fleft{
				width: 70%;	
				display: flex;
				padding-left: 1em;
				justify-content: flex-start;
				align-items: center;
			}
			.fright{
				height: 3.4em;
				background-color: #007AFF;
				text-align: center;
				width: 30%;
				line-height: 3.4em;
				color: white;
			}
			.fimg{
				width: 2.5em;
				height: 2.5em;
			}
			.fimg>img{
				width: 100%;
				height: 100%;
			}
			
		</style>
	</head>

	<body>
		
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">挂单列表</h1>
		</header>
		<div class="mui-content">
		    <div class="content">
		    	<div class="search">
		    		<div class="stext">
		    			单据号
		    			<div class="sjx">
		    			</div>
		    			
		    		</div>
		    		<div class="ssdiv">
		    			<input class="ssinp" type="" name="" id="" value=""  placeholder="请输入单据号/手机号/卡号/姓名/车牌号"/>
		    		</div>
		    		<div class="simg">
		    			<img src="../images/60x60.gif"/>
		    		</div>
		    	</div>
		    </div>
		    
		    <div class="cancell">
		    	<div class="" id="canlist">
		    		<!--
                    	作者：592176224@qq.com
                    	时间：2018-12-28
                    	描述：
                    
		    		<div class="mui-input-row mui-checkbox checklist">
		    		    <label>
		    		    	<div class="toptext fs1">
		    		    		<span id="">
		    		    			XF565651651651656
		    		    		</span>
		    		    		<span style="color: orange;">
		    		    			￥100.00
		    		    		</span>
		    		    	</div>
		    		    	<div class="toptext fs07">
		    		    		<span id="">
		    		    			某某（12025541551）
		    		    		</span>
		    		    	</div>
		    		    	<div class="toptext fs08">
		    		    		<span id="">
		    		    			2018-12-15 12:18:00
		    		    		</span>
		    		    		<span>
		    		    			已退单
		    		    		</span>
		    		    		<span id="">
		    		    			未结  <span style="color: orange;">
		    		    				点击结账
		    		    			</span>
		    		    		</span>
		    		    	</div>
		    		    	
		    		    </label>
		    		    <input name="Checkbox" type="checkbox" checked>
		    		</div>
		    		-->
		    	</div>
		    	
		    </div>
		    
		    
		    <div class="footdiv">
		    	<div class="fleft">
		    		<div class="mui-input-row mui-checkbox ">
		    		    <label>全选</label>
		    		    <input name="Checkbox" id="checkall" type="checkbox">
		    		</div>
		    	</div>
		    	<div class="fright">
		    		删除
		    	</div>
		    </div>
		    
		</div>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				
				getcamlist(3)
				document.getElementById('checkall').addEventListener('change',function() {
		            var listBox = mui('.listcheckbox');
		            if (this.checked) {
		                listBox.each(function() {
		                    this.checked = true;
		                })
		            } else {
		                listBox.each(function() {
		                    this.checked = false;
		                })
		            }
		        })
			}
			
			function setcheckbox(e){
				if(!e.checked){
					//$('#checkall').removeAttribute('checked');
					document.getElementById('checkall').checked = false;
				}
			}
			
			function getcamlist(id){
				let canlist = document.getElementById("canlist");
				let str = '<div class="mui-input-row mui-checkbox checklist">\
		    		    <label><div class="toptext fs1"><span id="">\
		    		    XF565651651651656\
		    		    </span><span style="color: orange;">\
		    		    ￥100.00\
		    		    </span></div><div class="toptext fs07"><span id="">\
		    		    某某（12025541551）\
		    		    </span></div><div class="toptext fs08"><span id="">\
		    		    2018-12-15 12:18:00\
		    		    </span><span>\
		    		    已退单\
		    		    </span><span id="">\
		    		    未结  <span style="color: orange;">点击结账\
		    		    </span></span></div></label>\
		    		    <input name="Checkbox" class="listcheckbox" onchange="setcheckbox(this)" type="checkbox"></div>';
				
				for (let i = 0; i <id; i ++) {
					canlist.innerHTML += str;
				}
				
			}
		</script>
	</body>

</html>