实例2：设置复选框

最新推荐文章于 2024-10-29 10:19:27 发布

zhuzongzhi856

最新推荐文章于 2024-10-29 10:19:27 发布

阅读量708

点赞数 2

分类专栏： Web 前端

本文链接：https://blog.youkuaiyun.com/zhuzongzhi856/article/details/71835860

版权

Web 前端专栏收录该内容

8 篇文章

订阅专栏

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>操作复选框</title>
		<link rel="stylesheet" href="css/index.css" />
		<script type="text/javascript" src="js/index.js" ></script>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
	</head>
	<body>
		<div id="hobby">
			您喜欢做的事情：
			<div>
				<input id="basketball" type="checkbox" name="basketball" />篮球
			</div>
			<div>
				<input id="tv" type="checkbox" name="tv" />看电视
			</div>
			<div>
				<input id="internet" type="checkbox" name="internet" />上网
			</div>
			<div>
				<input id="book" type="checkbox" name="book" />看书
			</div>
			<div>
				<input id="tour" type="checkbox" name="tour" />旅游
			</div>
			<div>
				<input id="music" type="checkbox" name="music" />听音乐
			</div>
			<div>
				<input id="others" type="checkbox" name="others" />其他
			</div>
		</div>
		<div id="buttonGroup">
			<div class="button">
				<button id="selectAll" οnclick="selectHobby(this)">全选</button>
			</div>
			<div class="button">
				<button id="selectNone" οnclick="selectHobby(this)">全不选</button>
			</div>
			<div class="button">
				<button id="selectInvert" οnclick="selectHobby(this)">反选</button>
			</div>
		</div>
	</body>
</html>

//获取所有喜欢做的事情
function getHobby(selector){
	return $(selector);
}

//绑定行
function bindRaw(){
	$("#hobby div").each(function (){
		$(this).on('click', function (){
			var inputId = $($(this)[0].children[0].outerHTML).attr("id");
			$("#"+inputId).prop("checked", !$("#"+inputId).prop("checked"));
		})
	})
}

window.addEventListener('load', getHobby, false);
window.addEventListener('load', bindRaw, false);

//按钮触发事件
function selectHobby(object){
	console.debug(object);
	
	var selector = "input";
	var inputs = getHobby(selector);
	
	var docId = object.id;	
	switch(docId){
		case "selectAll":
			selectAll(inputs);
			break;
		case "selectNone":
			selectNone(inputs);
			break;
		case "selectInvert":
			selectInvert(inputs);
			break;
	}
	
}

//全选
function selectAll(inputs){
	inputs.each(function all(){
		$(this).prop("checked", true);
	});
}

//全不选
function selectNone(inputs){
	inputs.each(function none(){
		$(this).prop("checked", false);
	});
}

//反选
function selectInvert(inputs){
	inputs.each(function invert(){
		if ($(this).prop("checked", !$(this).prop("checked")));
	});
}

CSS

#hobby{
	margin-bottom: 10px;
}

#hobby div{
	cursor: pointer;
	width: 100px;
}

.button{
	display: inline;
	cursor: pointer;
}

.button button{
	border-radius: 10px;
}