JQuery是一種JavaScript庫,廣泛用于前端Web開發。其中一個常用的功能是表格行的全選和反選,能夠提高用戶體驗和操作效率。下面將介紹如何實現JQuery表格行的全選和反選。
$(document).ready(function(){
// 全選方框的ID,給他綁定click事件
$("#checkAll").click(function(){
// 如果是選中狀態,則全選;否則,反選
if($(this).prop("checked")) {
$("input[name='subBox']").prop("checked",true);
}else{
$("input[name='subBox']").prop("checked",false);
}
});
// 子方框的class,給他們每個綁定click事件
$("input[name='subBox']").click(function(){
// 獲取所有子方框的個數
var len = $("input[name='subBox']").length;
// 獲取所有選中的子方框的個數
var checked = $("input[name='subBox']:checked").length;
// 如果選中的數目等于子方框的總數,則全選方框也要選中
if(len == checked){
$("#checkAll").prop("checked",true);
}else{
$("#checkAll").prop("checked",false);
}
});
});
以上代碼定義了一個全選方框和多個子方框,通過給全選方框的click事件和子方框的click事件分別綁定函數來實現全選和反選的功能。首先點擊全選方框的時候,通過判斷狀態來進行全選或反選操作。其次,每個子方框的點擊事件會對所有子方框的狀態進行計數,當所有子方框都被選中時候,會自動選中全選方框。
下一篇jquery解壓壓縮包