在使用jQuery處理復(fù)選框時(shí),可能會(huì)遇到需要同時(shí)選中多個(gè)復(fù)選框的需求,這時(shí)可以使用全選功能來實(shí)現(xiàn)。下面是一些實(shí)現(xiàn)全選的代碼示例:
// 給全選按鈕添加click事件 $("#selectAll").click(function() { // 判斷全選按鈕是否被選中 if($(this).prop("checked")) { // 如果被選中,則選中所有復(fù)選框 $("input[type='checkbox']").prop("checked", true); } else { // 如果未被選中,則取消所有復(fù)選框的選中狀態(tài) $("input[type='checkbox']").prop("checked", false); } });
上述代碼中,通過判斷全選按鈕的選中狀態(tài),然后使用prop()方法來設(shè)置所有復(fù)選框的選中狀態(tài)。可以使用相同的方法來實(shí)現(xiàn)部分選中的功能,即當(dāng)所有復(fù)選框都選中時(shí),全選按鈕也被選中,否則全選按鈕為未選中狀態(tài)。
// 給復(fù)選框添加click事件 $("input[type='checkbox']").click(function() { // 判斷所有復(fù)選框是否都被選中 if($("input[type='checkbox']:checked").length == $("input[type='checkbox']").length) { // 如果都被選中,則選中全選按鈕 $("#selectAll").prop("checked", true); } else { // 如果未全部選中,則取消全選按鈕的選中狀態(tài) $("#selectAll").prop("checked", false); } });
上述代碼中,使用了:checked選擇器來選中所有已經(jīng)被選中的復(fù)選框,并使用length屬性來獲取它們的數(shù)量,以判斷是否所有復(fù)選框都被選中。如果是,全選按鈕就被選中;否則全選按鈕就是未選中狀態(tài)。