<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="JQuery/jquery-2.0.0.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li><input type="checkbox" />周一</li>
<li><input type="checkbox" />周二</li>
<li><input type="checkbox" />周三</li>
<li><input type="checkbox" />周四</li>
<li><input type="checkbox" />周五</li>
</ul>
<input type="button" id="btnAllSelct" value="全选"/>
<input type="button" id="btnAllNotSelct" value="全不选" />
<input type="button" id="btnBackAllSelct" value="反选" />
<script type="text/javascript">
$(function () {
//全选
$("#btnAllSelct").click(function () {
//注意获取和设置属性的两个方法attr()和prop()的区别
$("ul input").prop("checked", true);//这是使用prop()方法来设置属性
//$("ul input").attr("checked", "checked");//这是使用attr()方法来设置属性
});
//全不选
$("#btnAllNotSelct").click(function () {
$("ul input").prop("checked", false);
});
//反选
$("#btnBackAllSelct").click(function () {
$("ul input").prop("checked", function (index,checked) {
return !checked;
});
});
});
</script>
</body>
</html>
使用JQuery实现全选全部选和反选
最新推荐文章于 2024-01-23 19:19:19 发布