前段時間使用JavaScript寫了一個簡易版的Checkbox全選全不選功能
于是最近使用jQuery完善了Checkbox的反選、提交等功能,，以下為完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用prop和checked實現(xiàn)復(fù)選框全選全不選反選等功能</title>
<script src="https://apps./libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
// 全選按鈕功能
$("#checkedAllBtn").click(function () {
$(":checkbox").prop("checked", true);
});
// 全不選按鈕功能
$("#checkedNoBtn").click(function () {
$(":checkbox").prop("checked", false);
});
// 反選按鈕功能
$("#checkedRevBtn").click(function () {
$(":checkbox[name='items']").each(function () {
// 每次執(zhí)行傳遞進(jìn)來的函數(shù)時,，函數(shù)中的this關(guān)鍵字都指向一個不同的DOM元素（這里指不同的items復(fù)選框）
this.checked = !this.checked;
});
// 獲取所有球類運動選項框的數(shù)量
var allCount = $(":checkbox[name='items']").length;
// 獲取當(dāng)前球類運動選項框選中的數(shù)量
var checkedCount = $(":checkbox[name='items']:checked").length;
// 如果復(fù)選框選中數(shù)量和總數(shù)量相同，則將全選/全不選按鈕狀態(tài)隨之更改為true/false
$("#checkedAllNone").prop("checked", allCount === checkedCount);
});
// 提交按鈕功能
$("#submitBtn").click(function () {
// :冒號選擇器要緊跟著前面的選擇器,，不能有空格,，不然會失去效果
$(":checkbox[name='items']:checked").each(function () {
// 在事件的function函數(shù)中，有一個this對象,，這個this對象是當(dāng)前正在相應(yīng)的DOM對象（這里指選中的運動）
alert(this.value);
});
});
// 全選/全不選按鈕功能
$("#checkedAllNone").click(function () {
//在事件的function函數(shù)中,，有一個this對象，這個this對象是當(dāng)前正在相應(yīng)的DOM對象（這里指全選/全不選按鈕）
$(":checkbox[name='items']").prop("checked", this.checked);
});
// 當(dāng)所有球類運動復(fù)選框都被選中時,，全選按鈕同時更改為被選中狀態(tài)
$(":checkbox[name='items']").click(function () {
// 獲取所有球類運動選項框的數(shù)量
var allCount = $(":checkbox[name='items']").length;
// 獲取當(dāng)前球類運動選項框選中的數(shù)量
var checkedCount = $(":checkbox[name='items']:checked").length;
$("#checkedAllNone").prop("checked", allCount == checkedCount);
});
});
</script>
</head>
<body>
<div style="width:100%;text-align:center">
<form>
<span>請選擇你喜歡的多項球類運動吧：</span>
<br><br>
<input type="checkbox" id="checkedAllNone">全選/全不選
<br>
<input type="checkbox" name="items" value="籃球">籃球
<input type="checkbox" name="items" value="足球">足球
<input type="checkbox" name="items" value="冰球">冰球
<input type="checkbox" name="items" value="棒球">棒球
<br><br>
<input type="button" id="checkedAllBtn" value="全選">
<input type="button" id="checkedNoBtn" value="全不選">
<input type="button" id="checkedRevBtn" value="反選">
<input type="button" id="submitBtn" value="提交">
</form>
</div>
</body>
</html>
代碼運行效果：
|
