checkbox运用

拼搏现实的明天。 2022-04-10 07:25 239阅读 0赞

做一个简单，复选框事件。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70][]

<!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">
    		    		
    		    	</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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70]: /images/20220402/41ee3cf28dab481aa01961360cc53307.png