全选和复选,移动的div

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function change(){
				var checkdocs = document.getElementsByClassName("cll_check");
				for(var i = 0;i<checkdocs.length;i++){
					var checkNode = checkdocs[i];
					if(checkNode.checked == true){
						checkNode.checked = false;
					}else{
						checkNode.checked = true;
					}
				}
			}
		</script>
		<style type="text/css">
			#ul{
				list-style: none;
			}
		</style>
	</head>
	<body>
		<input type="checkbox" onclick="change()"/>全选
		<h2>你的爱好是</h2>
		<ul>			
			<li><input type="checkbox" class="cll_check"/>看书</li>
			<li><input type="checkbox" class="cll_check"/>看电影</li>
			<li><input type="checkbox" class="cll_check"/>玩游戏</li>
			<li><input type="checkbox" class="cll_check"/>刷抖音</li>
			<li><input type="checkbox" class="cll_check"/>泡芙</li>
			<li><input type="checkbox" class="cll_check"/>打台球</li>
			<li><input type="checkbox" class="cll_check"/>打麻将</li>			
		</ul>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				width: 100px;
				height: 100px;
				background-color: aqua;
				position: absolute;
				cursor: move;
			}
		</style>
	</head>
	<body>
		<div id="d1"></div>
		<script type="text/javascript">
			var d1Node = document.getElementById("d1");
			d1Node.onmousedown = function(e){	var w = e.clientX - d1Node.offsetLeft;
				var h = e.clientY - d1Node.offsetTop;	var w = e.clientX - d1Node.offsetLeft;
				var h = e.clientY - d1Node.offsetTop;
				document.onmousemove = function(ev){
					d1Node.style.top = (ev.clientY - h) + "px";
					d1Node.style.left = (ev.clientX - w)+ "px";
				}			
			}
			d1Node.onmouseup = function(){
				document.onmousemove = null;
			}
			
			
			
			
		</script>
	</body>
</html>

可以通过 JavaScript 来实现 HTML 复选框的全选和取消全选。 首先,需要在 HTML 中为全选复选框和其他子复选框添加相应的 ID 或 class,例如: ```html <label><input type="checkbox" id="check-all">全选</label> <label><input type="checkbox" class="sub-check">选项1</label> <label><input type="checkbox" class="sub-check">选项2</label> <label><input type="checkbox" class="sub-check">选项3</label> ``` 然后,可以使用以下 JavaScript 代码来实现全选和取消全选功能: ```javascript // 获取全选复选框和子复选框元素 var checkAll = document.getElementById('check-all'); var subChecks = document.getElementsByClassName('sub-check'); // 全选/取消全选操作 checkAll.onclick = function() { for (var i = 0; i < subChecks.length; i++) { subChecks[i].checked = checkAll.checked; } } // 子复选框状态改变时,检查是否全部选中 for (var i = 0; i < subChecks.length; i++) { subChecks[i].onclick = function() { var checkedCount = 0; for (var j = 0; j < subChecks.length; j++) { if (subChecks[j].checked) { checkedCount++; } } checkAll.checked = (checkedCount == subChecks.length); } } ``` 以上代码中,首先获取全选复选框和子复选框的元素,然后为全选复选框绑定点击事件,当全选复选框状态改变时,遍历所有子复选框,将它们的选中状态与全选复选框的状态保持一致。同时,为每个子复选框绑定点击事件,当子复选框状态改变时,遍历所有子复选框,检查是否全部选中,如果是,则将全选复选框选中,否则取消选中。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值