例子:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.11.3.js"></script>
<script>
$(function () {
//全選
//添加全選事件
$("#Button1").click(function () {
//擷取屬性名為name='checkbox',然後添加checked= true,實作全選
$("input[name='checkbox']").prop("checked", "true");
});
//反選
//添加全飯選事件
$("#Button2").click(function () {
//擷取屬性名為name='checkbox'對其進行便利循環
$("input[name='checkbox']").each(function () {
//判斷checked屬性值,如果有則删除,如果沒有則添加
if ($(this).prop("checked")) {
$(this).removeAttr("checked")
}
else {
$(this).prop("checked", "true");
}
});
});
//全不選
//添加全不飯選事件
$("#Button3").click(function () {
//擷取屬性名為name='checkbox',删除所有checked屬性
$("input[name='checkbox']").removeAttr("checked");
});
});
</script>
</head>
<body>
<div>
<input id="Checkbox1" type="checkbox" name="checkbox"/>籃球
<br />
<input id="Checkbox2" type="checkbox" name="checkbox"/>乒乓球
<br />
<input id="Checkbox3" type="checkbox" name="checkbox"/>足球
<br />
<input id="Checkbox4" type="checkbox" name="checkbox"/>羽毛球
<br />
<input id="Checkbox5" type="checkbox" name="checkbox"/>撞球
<br />
=================================================
<br />
<input id="Button1" type="button" value="全選" />
<input id="Button2" type="button" value="反選" />
<input id="Button3" type="button" value="全不選" />
</div>
</body>
</html>
效果: