JQuery学习13篇(操作节点的布尔属性)

最新推荐文章于 2020-07-17 02:24:04 发布

程宇寒

最新推荐文章于 2020-07-17 02:24:04 发布

阅读量223

点赞数

文章标签： JQuery javascript js 操作节点的布尔属性前端开发

本文链接：https://blog.csdn.net/czh500/article/details/103614796

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery学习13篇(操作节点的布尔属性)</title>
<link rel="stylesheet" type="text/css" href="inputAndDiv.css">
<style type="text/css">
input[type=button] {
	width: 100px;
}

input[type=checkbox] {
	width: 20px;
	height: 20px;
}
</style>
</head>
<body style="background-color: #CCE8CF;">
	<h3 style="color: #cd1636;">JQuery学习13篇(操作节点的布尔属性)</h3>
	<input type ="button" value="全选" onclick="whole()"/>
	<input type ="button" value="全不选" onclick="none_of()"/>
	<input type ="button" value="反选" onclick="opposite()"/>
	<div>
		<input type ="checkbox"/>赣南脐橙<br/>
		<input type ="checkbox"/>柿子饼<br/>
		<input type ="checkbox"/>番薯干<br/>
		<input type ="checkbox"/>珍珠粉<br/>
		<input type ="checkbox"/>酸萝卜<br/>
	</div>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//javascript中函数在取名字时，不能叫all
function whole()
{
// 	$('input:checkbox').attr('checked', true);//不要使用这种方式，容易出莫名其妙的问题
	$('input:checkbox').prop('checked', true);
}

function none_of()
{
// 	$('input:checkbox').attr('checked', false);//不要使用这种方式，容易出莫名其妙的问题
	$('input:checkbox').prop('checked', false);
}

//反选
function opposite()
{
	console.log($('input:checkbox'));
	$('input:checkbox').each(function(){
		this.checked = !this.checked;
	});
}
</script>
</html>