jquery操作核取方塊的選中和不選中狀態非常簡單，使用attr()來設定"checked"屬性的值，true未選中，false為未選中，在整個全選、反選過程中注意處理全選核取方塊的選中狀態，以及獲取選中選項的值。
<
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"
>
$
(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
}
來自為知筆記(wiz)
jquery實現全選 反選功能
如何利用jquery是先簡單的全選反選功能 首先我們需要載頁面中引入jquery jquery 3.4.1.min.js script 然後我們需要引入input標籤 全選 checkbox id checkall 反選 checkbox id checkother checkbox li chec...
jQuery實現全選 反選和不選功能
直接複製儲存用瀏覽器開啟可以看效果，功能實現挺好的。1doctype html 2 html lang zh cn 34 head 5 meta charset utf 8 6 title jquery實現全選 反選和不選功能 title 78 link href rel stylesheet 9 ...
jQuery實現的全選 反選和不選功能
我們的頁面上有乙個歌曲列表，列出多行歌曲名稱，並匹配核取方塊供使用者選擇，並且在列表下方有一排操作按鈕。type checkbox id all type button value 全選 class btn id selectall type button value 全不選 class btn i...