轉需https://www.helloweba.net/javascript/254.html
效果演示:
HTML
我們的頁面上有一個歌曲列表,列出多行歌曲名稱,並匹配複選框供用戶選擇,並且在列表下方有一排操作按鈕。
<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庫文件:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
jQuery
1、全選或全不選。當勾選全選按鈕#selectAll旁邊的複選框#all時,列表中的選項全部選中,反之取消勾選則列表中的選項全部爲未選中狀態。
$("#all").click(function(){
if(this.checked){
$("#list :checkbox").prop("checked", true);
}else{
$("#list :checkbox").prop("checked", false);
}
});
2、全選。當點擊全選按鈕#selectAll或者勾選全選按鈕旁邊的複選框#all時,列表中所有的選項都會被選中,包括全選旁邊的複選框也是選中狀態。
$("#selectAll").click(function () {
$("#list :checkbox,#all").prop("checked", true);
});
3、全不選。當點擊全不選按鈕#unSelect時,列表中所有的選項都是未選中狀態,當然包括#all也是未選中狀態。
$("#unSelect").click(function () {
$("#list :checkbox,#all").prop("checked", false);
});
4、反選。當點擊反選按鈕#reverse,列表中所有被選中的選項變爲未選中狀態,而所有未選中的選項變爲已選中狀態,當然也要注意#all的狀態。
$("#reverse").click(function () {
$("#list :checkbox").each(function () {
$(this).prop("checked", !$(this).prop("checked"));
});
allchk();
});
上述代碼中遍歷了選項列表,然後改變checked屬性,調用函數allchk()是幹什麼的,別急,留在後面介紹。
5、獲得選中的所有值。我們要跟後臺程序交互就必須獲取列表中所選項的值,我們通過遍歷數組,將選中項的值存放在數組中,最後組成由逗號(,)隔開的字符串,開發者就可以通過獲取這個字符串進行相應的操作了。
$("#getValue").click(function(){
var valArr = new Array;
$("#list :checkbox[checked]").each(function(i){
valArr[i] = $(this).val();
});
var vals = valArr.join(',');//轉換爲逗號隔開的字符串
alert(vals);
});
爲了完善選中選項功能,我們在單擊列表中某個選項時,如果勾選的項剛好滿足全部選中的條件,則#all也要相應的變爲選中狀態,同樣,如果事先所有的選項是選中狀態時,當取消勾選某個選項時,那麼#all也要相應的變爲未選中狀態。
//設置全選複選框
$("#list :checkbox").click(function(){
allchk();
});
函數allchk()就是用來檢測全選框#all應該是選中狀態還是未選中狀態的,請看代碼。
function allchk(){
var chknum = $("#list :checkbox").size();//選項總個數
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);
}
}
總結
jQuery操作複選框的選中和不選中狀態非常簡單,使用attr()來設置"checked"屬性的值,true未選中,false爲未選中,在整個全選、反選過程中注意處理全選複選框的選中狀態,以及獲取選中選項的值。以下我將所有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();
});
//設置全選複選框
$("#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();//選項總個數
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);
}
}