checkbox全选，非全选

费马程序猿

已于 2022-02-11 15:07:22 修改

阅读量881

点赞数

文章标签： layui javascript 前端 jquery

于 2021-12-20 11:47:22 首次发布

本文链接：https://blog.csdn.net/weixin_43498992/article/details/122038200

版权

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
	<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
 
	<body>
		<div id="checkboxs">
			<input type='checkbox' id="cheAll" name='cheAll' title='全选' onclick='checkboxAll()' checked> 全选<br/>
			<input type='checkbox' name='excelChe' title='姓名' value='姓名:userName' checked> 姓名<br/>
			<input type='checkbox' name='excelChe' title='身份证号' value='身份证号:idCard' checked> 身份证号<br/>
			<input type='checkbox' name='excelChe' title='年龄' value='年龄:age' checked> 年龄<br/>
			<input type='checkbox' name='excelChe' title='性别' value='性别:sex' checked> 性别<br/>
			<input type='checkbox' name='excelChe' title='手机号' value='手机号:phone' checked> 手机号<br/>
			<input type='checkbox' name='excelChe' title='公司名' value='公司名:org' checked> 公司名<br/>
			<br /> <br />
			<button onclick="sumbit()">导出</button>&nbsp&nbsp&nbsp&nbsp&nbsp<button>取消</button>
		</div>
	</body>
	<script type="text/javascript">
		//全选 取消全选
		function checkboxAll() {
			let excelCheArr = document.getElementsByName('excelChe'); //获取div下的input
			let isSelectAll = $("#cheAll").prop("checked"); //是否选中全选 是返回true否返回false
			for(i = 0; i < excelCheArr.length; i++) {
				excelCheArr[i].checked = isSelectAll;
			}
		}
		//是否有项没被选 有：取消全选 没有：全选
		$('input:checkbox[name="excelChe"]').click(function() {
			let excelCheArr = document.getElementsByName('excelChe'); //获取div下的input
			let isSelectAll = true; //默认全选
			$.each(excelCheArr,function(index,item){
		    if(!item.checked) {
							isSelectAll = false; //当有一项未选中时 全选标识为false
							return;
						}
			});
			$("#cheAll").prop('checked', isSelectAll);
		});
		//提交选择的字符项
		function sumbit() {
			//获取input类型是checkBox并且 name="box"选中的checkBox的元素
			var data = $('input:checkbox[name="excelChe"]:checked').map(function() {
				return $(this).val();
			}).get().join(",");
			//弹出结果
			alert(data);
 
			var arr = data.split(',');
			console.log(arr);
		}
	</script>
 
</html>

费马程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
checkbox全选，非全选

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <link rel="stylesheet" type="text/css" href="layui/css/layui.css" /> <script src="js/jquery-3.6.0.min.js" type="text/j.
复制链接

扫一扫