資訊專欄INFORMATION COLUMN
摘要：當(dāng)勾選全選按鈕旁邊的復(fù)選框時(shí)，列表中的選項(xiàng)全部選中，反之取消勾選則列表中的選項(xiàng)全部為未選中狀態(tài)。全選或全不選全選全不選反選設(shè)置全選復(fù)選框獲取選中選項(xiàng)的值選項(xiàng)總個(gè)數(shù)全選不全選
HTML
我們的頁(yè)面上有一個(gè)歌曲列表，列出多行歌曲名稱，并匹配復(fù)選框供用戶選擇，并且在列表下方有一排操作按鈕。
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ul id="list">
<li><label><input type="checkbox" value="1"> 1.時(shí)間都去哪兒了 |
jQuery插件
1、全選或全不選。當(dāng)勾選全選按鈕#selectAll旁邊的復(fù)選框#all時(shí)，列表中的選項(xiàng)全部選中，反之取消勾選則列表中的選項(xiàng)全部為未選中狀態(tài)。
?| 1 2 3 4 5 6 7 |
$("#all").click(function(){
if(this.checked){
$("#list :checkbox").prop("checked", true);
}else{
$("#list :checkbox").prop("checked", false);
}
});
|
2、jQuery全選。當(dāng)點(diǎn)擊全選按鈕#selectAll或者勾選全選按鈕旁邊的復(fù)選框#all時(shí)，列表中所有的選項(xiàng)都會(huì)被選中，包括全選旁邊的復(fù)選框也是選中狀態(tài)。
?| 1 2 3 |
$("#selectAll").click(function () {
$("#list :checkbox,#all").prop("checked", true);
});
|
3、全不選。當(dāng)點(diǎn)擊全不選按鈕#unSelect時(shí)，列表中所有的選項(xiàng)都是未選中狀態(tài)，當(dāng)然包括#all也是未選中狀態(tài)。
?| 1 2 3 |
$("#unSelect").click(function () {
$("#list :checkbox,#all").prop("checked", false);
});
|
4、反選。當(dāng)點(diǎn)擊反選按鈕#reverse，列表中所有被選中的選項(xiàng)變?yōu)槲催x中狀態(tài)，而所有未選中的選項(xiàng)變?yōu)橐堰x中狀態(tài)，當(dāng)然也要注意#all的狀態(tài)。
?| 1 2 3 4 5 6 |
$("#reverse").click(function () {
$("#list :checkbox").each(function () {
$(this).prop("checked", !$(this).prop("checked"));
});
allchk();
});
|
上述代碼中遍歷了選項(xiàng)列表，然后改變checked屬性，調(diào)用函數(shù)allchk()是干什么的，別急，留在后面介紹。
5、獲得選中的所有值。我們要跟后臺(tái)程序交互就必須獲取列表中所選項(xiàng)的值，我們通過遍歷數(shù)組，將選中項(xiàng)的值存放在數(shù)組中，最后組成由逗號(hào)(,)隔開的字符串，開發(fā)者就可以通過獲取這個(gè)字符串進(jìn)行相應(yīng)的操作了。
?| 1 2 3 4 5 6 7 8 |
$("#getValue").click(function(){
var valArr = new Array;
$("#list :checkbox[checked]").each(function(i){
valArr[i] = $(this).val();
});
var vals = valArr.join(,);//轉(zhuǎn)換為逗號(hào)隔開的字符串
alert(vals);
});
|
為了完善選中選項(xiàng)功能，我們?cè)趩螕袅斜碇心硞€(gè)選項(xiàng)時(shí)，如果勾選的項(xiàng)剛好滿足全部選中的條件，則#all也要相應(yīng)的變?yōu)檫x中狀態(tài)，同樣，如果事先所有的選項(xiàng)是選中狀態(tài)時(shí)，當(dāng)取消勾選某個(gè)選項(xiàng)時(shí)，那么#all也要相應(yīng)的變?yōu)槲催x中狀態(tài)。
?| 1 2 3 4 |
//設(shè)置全選復(fù)選框
$("#list :checkbox").click(function(){
allchk();
});
|
函數(shù)allchk()就是用來(lái)檢測(cè)全選框#all應(yīng)該是選中狀態(tài)還是未選中狀態(tài)的，請(qǐng)看代碼。
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function allchk(){
var chknum = $("#list :checkbox").size();//選項(xiàng)總個(gè)數(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)非常簡(jiǎn)單，使用attr()來(lái)設(shè)置"checked"屬性的值，true未選中，false為未選中，在整個(gè)全選、反選過程中注意處理全選復(fù)選框的選中狀態(tài)，以及獲取選中選項(xiàng)的值。以下我將所有jQuery代碼整理在一起，供大家參考。
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
$(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();
});
//獲取選中選項(xiàng)的值
$("#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();//選項(xiàng)總個(gè)數(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);
}
}
|
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1055.html
摘要：最近在看廖雪峰的教程，事件篇的練習(xí)題比較綜合，研究了很久終于研究出來(lái)了，現(xiàn)在分享出來(lái)，提供給小白學(xué)習(xí)。題目如下首先要獲取到全選和每一項(xiàng)的，然后通過邏輯代碼實(shí)現(xiàn)題目要求。 最近在看廖雪峰的Jquery教程，事件篇的練習(xí)題比較綜合，研究了很久終于研究出來(lái)了，現(xiàn)在分享出來(lái)，提供給小白學(xué)習(xí)。題目如下： showImg(https://segmentfault.com/img/bV7pGr?w=...
摘要：最近在看廖雪峰的教程，事件篇的練習(xí)題比較綜合，研究了很久終于研究出來(lái)了，現(xiàn)在分享出來(lái)，提供給小白學(xué)習(xí)。題目如下首先要獲取到全選和每一項(xiàng)的，然后通過邏輯代碼實(shí)現(xiàn)題目要求。 最近在看廖雪峰的Jquery教程，事件篇的練習(xí)題比較綜合，研究了很久終于研究出來(lái)了，現(xiàn)在分享出來(lái)，提供給小白學(xué)習(xí)。題目如下： showImg(https://segmentfault.com/img/bV7pGr?w=...
摘要：最后，我們只要在事件處理程序中獲得這個(gè)布爾值傳給這幾個(gè)函數(shù)就可以了，其中，全選框反選鏈接可以從全選框的屬性獲得這個(gè)值，而全體的復(fù)選框要獲得就得靠遍歷了。 0x1播放列表收縮展開 實(shí)現(xiàn)效果 值得注意的一個(gè)地方是那個(gè)箭頭，我這里只是用了簡(jiǎn)單的字符串替換，而原題用了背景圖片移動(dòng)來(lái)實(shí)現(xiàn)切換箭頭，但是似乎那樣做會(huì)導(dǎo)致整個(gè)容器的左右偏移、效果不是很好。 0x2鼠標(biāo)移過顯示車標(biāo) 實(shí)現(xiàn)效果 這題看起來(lái)...
摘要：前段時(shí)間做了一個(gè)全選和反選的功能，最近不忙了，做了一個(gè)簡(jiǎn)化版的。全部代碼如下全選反選全選反選大海天路再回首突然的自我甘心情愿光輝歲月雨蝶愛拼才會(huì)贏我只在乎你日不落選中的個(gè)數(shù) 前段時(shí)間做了一個(gè)全選和反選的功能，最近不忙了，做了一個(gè)簡(jiǎn)化版的demo。 showImg(https://segmentfault.com/img/bV3v44?w=489&h=318); 全部代碼如下： ...
摘要：前段時(shí)間做了一個(gè)全選和反選的功能，最近不忙了，做了一個(gè)簡(jiǎn)化版的。全部代碼如下全選反選全選反選大海天路再回首突然的自我甘心情愿光輝歲月雨蝶愛拼才會(huì)贏我只在乎你日不落選中的個(gè)數(shù) 前段時(shí)間做了一個(gè)全選和反選的功能，最近不忙了，做了一個(gè)簡(jiǎn)化版的demo。 showImg(https://segmentfault.com/img/bV3v44?w=489&h=318); 全部代碼如下： ...
閱讀 735·2023-04-25 19:43
閱讀 3981·2021-11-30 14:52
閱讀 3807·2021-11-30 14:52
閱讀 3871·2021-11-29 11:00
閱讀 3802·2021-11-29 11:00
閱讀 3904·2021-11-29 11:00
閱讀 3580·2021-11-29 11:00
閱讀 6182·2021-11-29 11:00
