這篇文章給大家分享的是有關(guān)jQuery如何實現(xiàn)全選、反選和不選功能的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
專業(yè)成都網(wǎng)站建設(shè)公司,做排名好的好網(wǎng)站,排在同行前面,為您帶來客戶和效益!成都創(chuàng)新互聯(lián)公司為您提供成都網(wǎng)站建設(shè),五站合一網(wǎng)站設(shè)計制作,服務(wù)好的網(wǎng)站設(shè)計公司,網(wǎng)站設(shè)計、成都網(wǎng)站設(shè)計負責(zé)任的成都網(wǎng)站制作公司!
HTML
我們的頁面上有一個歌曲列表,列出多行歌曲名稱,并匹配復(fù)選框供用戶選擇,并且在列表下方有一排操作按鈕。
<ul id="list"> <li><label><input type="checkbox" value="1"> 1.時間都去哪兒了</label></li> <li><label><input type="checkbox" value="2"> 2.海闊天空</label></li> <li><label><input type="checkbox" value="3"> 3.真的愛你</label></li> <li><label><input type="checkbox" value="4"> 4.不再猶豫</label></li> <li><label><input type="checkbox" value="5"> 5.光輝歲月</label></li> <li><label><input type="checkbox" value="6"> 6.喜歡妳</label></li> </ul> <input type="checkbox" id="all"> <input type="button" value="全選" class="btn" id="selectAll"> <input type="button" value="全不選" class="btn" id="unSelect"> <input type="button" value="反選" class="btn" id="reverse"> <input type="button" value="獲得選中的所有值" class="btn" id="getValue">
jQuery
1、全選或全不選。當(dāng)勾選全選按鈕#selectAll旁邊的復(fù)選框#all時,列表中的選項全部選中,反之取消勾選則列表中的選項全部為未選中狀態(tài)。
$("#all").click(function(){ if(this.checked){ $("#list :checkbox").prop("checked", true); }else{ $("#list :checkbox").prop("checked", false); } });
2、全選。當(dāng)點擊全選按鈕#selectAll或者勾選全選按鈕旁邊的復(fù)選框#all時,列表中所有的選項都會被選中,包括全選旁邊的復(fù)選框也是選中狀態(tài)。
$("#selectAll").click(function () { $("#list :checkbox,#all").prop("checked", true); });
3、全不選。當(dāng)點擊全不選按鈕#unSelect時,列表中所有的選項都是未選中狀態(tài),當(dāng)然包括#all也是未選中狀態(tài)。
$("#unSelect").click(function () { $("#list :checkbox,#all").prop("checked", false); });
4、反選。當(dāng)點擊反選按鈕#reverse,列表中所有被選中的選項變?yōu)槲催x中狀態(tài),而所有未選中的選項變?yōu)橐堰x中狀態(tài),當(dāng)然也要注意#all的狀態(tài)。
$("#reverse").click(function () { $("#list :checkbox").each(function () { $(this).prop("checked", !$(this).prop("checked")); }); allchk(); });
上述代碼中遍歷了選項列表,然后改變checked屬性,調(diào)用函數(shù)allchk()是干什么的,別急,留在后面介紹。
5、獲得選中的所有值。我們要跟后臺程序交互就必須獲取列表中所選項的值,我們通過遍歷數(shù)組,將選中項的值存放在數(shù)組中,最后組成由逗號(,)隔開的字符串,開發(fā)者就可以通過獲取這個字符串進行相應(yīng)的操作了。
$("#getValue").click(function(){ var valArr = new Array; $("#list :checkbox[checked]").each(function(i){ valArr[i] = $(this).val(); }); var vals = valArr.join(',');//轉(zhuǎn)換為逗號隔開的字符串 alert(vals); });
為了完善選中選項功能,我們在單擊列表中某個選項時,如果勾選的項剛好滿足全部選中的條件,則#all也要相應(yīng)的變?yōu)檫x中狀態(tài),同樣,如果事先所有的選項是選中狀態(tài)時,當(dāng)取消勾選某個選項時,那么#all也要相應(yīng)的變?yōu)槲催x中狀態(tài)。
//設(shè)置全選復(fù)選框 $("#list :checkbox").click(function(){ allchk(); });
函數(shù)allchk()就是用來檢測全選框#all應(yīng)該是選中狀態(tài)還是未選中狀態(tài)的,請看代碼。
function allchk(){ var chknum = $("#list :checkbox").size();//選項總個數(shù) var chk = 0; $("#list :checkbox").each(function () { if($(this).prop("checked")==true){ chk++; } }); if(chknum==chk){//全選 $("#all").prop("checked",true); }else{//不全選 $("#all").prop("checked",false); } }
總結(jié)
jQuery操作復(fù)選框的選中和不選中狀態(tài)非常簡單,使用attr()來設(shè)置"checked"屬性的值,true未選中,false為未選中,在整個全選、反選過程中注意處理全選復(fù)選框的選中狀態(tài),以及獲取選中選項的值。以下我將所有jQuery代碼整理在一起,供大家參考。
$(function () { //全選或全不選 $("#all").click(function(){ if(this.checked){ $("#list :checkbox").prop("checked", true); }else{ $("#list :checkbox").prop("checked", false); } }); //全選 $("#selectAll").click(function () { $("#list :checkbox,#all").prop("checked", true); }); //全不選 $("#unSelect").click(function () { $("#list :checkbox,#all").prop("checked", false); }); //反選 $("#reverse").click(function () { $("#list :checkbox").each(function () { $(this).prop("checked", !$(this).prop("checked")); }); allchk(); }); //設(shè)置全選復(fù)選框 $("#list :checkbox").click(function(){ allchk(); }); //獲取選中選項的值 $("#getValue").click(function(){ var valArr = new Array; $("#list :checkbox[checked]").each(function(i){ valArr[i] = $(this).val(); }); var vals = valArr.join(','); alert(vals); }); }); function allchk(){ var chknum = $("#list :checkbox").size();//選項總個數(shù) var chk = 0; $("#list :checkbox").each(function () { if($(this).prop("checked")==true){ chk++; } }); if(chknum==chk){//全選 $("#all").prop("checked",true); }else{//不全選 $("#all").prop("checked",false); } }
感謝各位的閱讀!關(guān)于“jQuery如何實現(xiàn)全選、反選和不選功能”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
網(wǎng)站標(biāo)題:jQuery如何實現(xiàn)全選、反選和不選功能
分享URL:http://bm7419.com/article4/pscjie.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、做網(wǎng)站、動態(tài)網(wǎng)站、網(wǎng)站策劃、建站公司、品牌網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)