jq 全選 反選 判斷選中的條數

2022-05-08 10:30:08 字數 1756 閱讀 3598

1、全選或全不選。當勾選全選按鈕#selectall旁邊的核取方塊#all時,列表中的選項全部選中,反之取消勾選則列表中的選項全部為未選中狀態。

$("#all").click(function

()else

})

2、全選。當點選全選按鈕#selectall或者勾選全選按鈕旁邊的核取方塊#all時,列表中所有的選項都會被選中,包括全選旁邊的核取方塊也是選中狀態。

$("#selectall").click(function () );

3、全不選。當點選全不選按鈕#unselect時,列表中所有的選項都是未選中狀態,當然包括#all也是未選中狀態

$("#unselect").click(function () );

4、反選。當點選反選按鈕#reverse,列表中所有被選中的選項變為未選中狀態,而所有未選中的選項變為已選中狀態,當然也要注意#all的狀態。

$("#reverse").click(function () );

allchk();

});

上述**中遍歷了選項列表,然後改變checked屬性,呼叫函式allchk()是幹什麼的,別急,留在後面介紹。

5、獲得選中的所有值。我們要跟後台程式互動就必須獲取列表中所選項的值,我們通過遍歷陣列,將選中項的值存放在陣列中,最後組成由逗號(,)隔開的字串,開發者就可以通過獲取這個字串進行相應的操作了。

$("#getvalue").click(function());

var vals = valarr.join(',');//轉換為逗號隔開的字串

alert(vals);

});

為了完善選中選項功能,我們在單擊列表中某個選項時,如果勾選的項剛好滿足全部選中的條件,則#all也要相應的變為選中狀態,同樣,如果事先所有的選項是選中狀態時,當取消勾選某個選項時,那麼#all也要相應的變為未選中狀態。

//設定全選核取方塊

$("#list :checkbox").click(function());

函式allchk()就是用來檢測全選框#all應該是選中狀態還是未選中狀態的,請看**。

function allchk()

});if(chknum==chk)else

}

總結

$(function () else   

});

//全選

$("#selectall").click(function () );

//全不選

$("#unselect").click(function () );

//反選

$("#reverse").click(function () );

allchk();

});//設定全選核取方塊

$("#list :checkbox").click(function());

//獲取選中選項的值

$("#getvalue").click(function());

var vals = valarr.join(',');

alert(vals);

});});

function allchk()

});if(chknum==chk)else

}

獲取選中的條數

$("table :checkbox:checked").size()==0

jq 實現全選反選,獲取選中的值

function input name chk list normal on click function else 一般專案實現全選 實現全選反選 chk all on click function input name chk list on click function else div cl...

基於JQ的多選 全選 反選及獲取選中的值

doctype html html lang en head meta charset utf 8 title 多選 全選 反選 獲取選中的值 title head body p 中國古代十大名劍 p input type checkbox value 全選 id selectall 全選 div ...

jq實現批量全選與反選

doctype html html lang en head meta charset utf 8 title document title head body input type button value 刪除 table border 1 thead tr th input type chec...