input checkbox 全选和反选

最新推荐文章于 2024-04-01 19:33:10 发布

我是小妖怪,潇洒又自在

最新推荐文章于 2024-04-01 19:33:10 发布

阅读量906

点赞数

分类专栏： HTML/JavaScript 文章标签： checkbox全选 checkbox反选 input checkbox 全选/反选

本文链接：https://blog.csdn.net/lz527657138/article/details/90182635

版权

HTML/JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

全选和反选(仅供参考)

注:请忽略我的排版O(∩_∩)O哈哈~

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全选/反选</title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<style type="text/css">
			html,body{ height: 100%; padding: 0; margin: 0; }
			#div{ width: 100%;height: 100%; }
			.xh{ width: 10%; float: left; }
			.sj{ width: 50%;float: left; }
			.tealgin{ text-align: center; }
		</style>
	</head>
	<body>
		<div id="div">
			<div>
				<div class="xh">
					<input type="checkbox" id="checkId" onclick="check(this.id,'uncheckId')"/>全选/ 
					<input type="checkbox" id="uncheckId" onclick="uncheck(this.id,'checkId')"/>反选
				</div>
				<div class="sj">标题</div>
			</div>
			
			<div style="clear: both;">
				<div class="xh tealgin">
					<input type="checkbox" name="ids" value="1"/>
				</div>
				<div class="sj">1</div>
			</div>
			<div style="clear: both;">
				<div class="xh tealgin">
					<input type="checkbox" name="ids" value="2"/>
				</div>
				<div class="sj">2</div>
			</div>
			<div style="clear: both;">
				<div class="xh tealgin">
					<input type="checkbox" name="ids" value="3"/>
				</div>
				<div class="sj">3</div>
			</div>
			<div style="clear: both;">
				<div class="xh tealgin">
					<input type="checkbox" name="ids" value="4"/>
				</div>
				<div class="sj">4</div>
			</div>
			<div style="clear: both;">
				<div class="xh tealgin">
					<input type="checkbox" name="ids" value="5"/>
				</div>
				<div class="sj">5</div>
			</div>
			<div style="clear: both;">
				<div class="xh tealgin">
					<input type="checkbox" name="ids" value="6"/>
				</div>
				<div class="sj">6</div>
			</div>
			<div style="clear: both;">
				<div class="xh tealgin">
					<input type="checkbox" name="ids" value="7"/>
				</div>
				<div class="sj">7</div>
			</div>
		</div>
	<script type="text/javascript">
		function check(id,uncheck){
			var checkboxId = document.getElementById(id);
			var uncheckboxId = document.getElementById(uncheck);
			uncheckboxId.checked = false;
			var selectList = $("input[name='ids']");
			if(checkboxId.checked==true){
				for(var i = 0;i<selectList.length;i++){
				  if(selectList[i].type=="checkbox" ){
                    	selectList[i].checked= true;
                    }
				}
			}else{
				for(var i=0 ; i < selectList.length; i++){
                    if(selectList[i].type=="checkbox" ){
                    	selectList[i].checked= false;
                    }
               }
			}
		}
		
		function uncheck(id,check){
			var uncheckboxId = document.getElementById(id);
			var checkboxId = document.getElementById(check);
			checkboxId.checked = false;
			var unSelectList = $("input[name='ids']");
			for (var i = 0;i < unSelectList.length;i++) {
				if(unSelectList[i].checked == false){
					unSelectList[i].checked = true;
				}else{
					unSelectList[i].checked = false;
				}
			}
		}
		
		$(function(){
			$("input[name='ids']").change(function(){
				var total = $("input[name='ids']");console.info(total.length)
				var checkboxId = document.getElementById("checkId");
				var checkedNum = $("input[name='ids']:checked");console.info(checkedNum.length)
				if(total.length > checkedNum.length){
					if(checkboxId.checked==true){
						checkboxId.checked = false;
					}
				}else{
					if(checkboxId.checked==false){
						checkboxId.checked = true;
					}
				}
			});
		});
	</script>
	</body>
</html>

我是小妖怪,潇洒又自在

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
input checkbox 全选和反选

全选和反选(仅供参考)注:请忽略我的排版O(∩_∩)O哈哈~<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>全选/反选</title> <script type="text/javascript" src="js/jquer...
复制链接

扫一扫