<!DOCTYPE html>
<html>
<head>
<title>jQuery-全選/全部選/反選</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
?? ?//頁面加載完畢后執(zhí)行
?? ?$(function(){
?? ??? ?//獲取所有復(fù)選框?qū)ο?/strong>(以下都是獲取復(fù)選框?qū)ο蟮姆椒? [name=items]是屬性過濾器
?? ??? ?// const items = $(":checkbox[name=items]");
?? ??? ?// const items = $("[name='items']");
?? ??? ?const items = $(":checkbox");
?? ??? ?//全選按鈕
?? ??? ?$("#checkedAllBtn").click(function(){
?? ??? ??? ?//所有復(fù)選框的狀態(tài)都變成選中狀態(tài)
?? ??? ??? ?items.attr("checked",true);
?? ??? ??? ?//全選/全部選復(fù)選框的狀態(tài)也變成選中狀態(tài)
?? ??? ??? ?$("#checkedAllBox").attr("checked",true);
?? ??? ?});
?? ??? ?//全不選按鈕
?? ??? ?$("#checkedNoBtn").click(function(){
?? ??? ??? ?//所有復(fù)選框的狀態(tài)都變成非選中狀態(tài)
?? ??? ??? ?items.attr("checked",false);
?? ??? ??? ?//全選/全部選復(fù)選框的狀態(tài)也變成非選中狀態(tài)
?? ??? ??? ?$("#checkedAllBox").attr("checked",false);
?? ??? ?});文章來源：http://www.zghlxwxcb.cn/news/detail-458812.html
?? ??? ?//反選按鈕
?? ??? ?$("#checkedRevBtn").click(function(){
?? ??? ??? ?//使用循環(huán)函數(shù)each()對items數(shù)組進(jìn)行遍歷，遍歷過程中執(zhí)行函數(shù)體
?? ??? ??? ?items.each(function(){
?? ??? ??? ??? ?//對復(fù)選框的狀態(tài)賦相反值
?? ??? ??? ??? ?this.checked = !this.checked;
?? ??? ??? ?});
?? ??? ??? ?//判斷復(fù)選框的選中狀態(tài)數(shù)量，如果選中狀態(tài)的數(shù)量等于4 ? ":checked"表示選中狀態(tài)
?? ??? ??? ?if ($("[name='items']:checked").length == 4) {
?? ??? ??? ??? ?$("#checkedAllBox").attr("checked",true);
?? ??? ??? ?}else {
?? ??? ??? ??? ?$("#checkedAllBox").attr("checked",false);
?? ??? ??? ?}
?? ??? ?});
?? ??? ?
?? ??? ?//提交按鈕
?? ??? ?$("#sendBtn").click(function(){
?? ??? ??? ?//對選中狀態(tài)的復(fù)選框進(jìn)行遍歷
?? ??? ??? ?$(":checkbox:checked").each(function(){
?? ??? ??? ??? ?//彈出復(fù)選框的value屬性值
?? ??? ??? ??? ?alert(this.value);
?? ??? ??? ?});
?? ??? ?});
?? ??? ?
?? ??? ?//全選/全不選復(fù)選框
?? ??? ?$("#checkedAllBox").click(function(){
?? ??? ??? ?items.attr("checked",this.checked);
?? ??? ?});
?? ??? ?
?? ??? ?//全選/全不選復(fù)選框與items狀態(tài)同步
?? ??? ?//復(fù)選框綁定鼠標(biāo)點(diǎn)擊事件
?? ??? ?$("[name='items']").click(function(){
?? ??? ??? ?//判斷復(fù)選框被選中的狀態(tài)，等于4表示全部選中，結(jié)果是true，不等于4表示沒有全部選中，結(jié)果是false
?? ??? ??? ?//這種方式明顯比上面進(jìn)行if...else...語句精簡
?? ??? ??? ?const flag = $("[name='items']:checked").length == 4;
?? ??? ??? ?$("#checkedAllBox").attr("checked",flag);
?? ??? ?});
?? ?});
</script>
</head>
<body>
?? ?<form method="post" action="http://localhost:8080">
?? ??? ?你愛好的運(yùn)動是？<input type="checkbox" id="checkedAllBox" />全選/全不選
?? ??? ?<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 />
?? ??? ?<input type="button" id="checkedAllBtn" value="全 選" />
?? ??? ?<input type="button" id="checkedNoBtn" value="全不選" />
?? ??? ?<input type="button" id="checkedRevBtn" value="反 選" />
?? ??? ?<input type="button" id="sendBtn" value="提 交" />
?? ?</form>
</body>
</html>文章來源地址http://www.zghlxwxcb.cn/news/detail-458812.html
到了這里，關(guān)于jQuery-全選/全部選/反選的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
