Jquery checkbox 全選反選常常應(yīng)用于網(wǎng)頁(yè)中多個(gè)相關(guān)選項(xiàng)的選擇，本文將介紹如何使用Jquery代碼實(shí)現(xiàn)單擊全選或反選功能。

$("input[name='all']").click(function(){ //全選
var status = $(this).prop("checked");
$("input[name='items']").prop("checked", status);
});
$("input[name='items']").click(function(){ //反選
var flag = true; //標(biāo)記是否需要反選
$("input[name='items']").each(function(){
if(!$(this).prop("checked")){
flag = false;
}
});
$("input[name='all']").prop("checked", flag);
});

上述代碼中，我們通過(guò)選擇器選擇了全選和選項(xiàng)，給他們綁定單擊事件。當(dāng)全選被單擊時(shí)，我們獲取全選的選中狀態(tài)，然后給所有選項(xiàng)設(shè)置相同狀態(tài)。當(dāng)選項(xiàng)被單擊時(shí)，我們首先遍歷每一個(gè)選項(xiàng)，如果有一個(gè)選項(xiàng)沒(méi)有被選中，標(biāo)記為false，表示需要反選。最終根據(jù)標(biāo)記的值給全選按鈕設(shè)置相應(yīng)的狀態(tài)。

至此，你已經(jīng)學(xué)會(huì)了使用Jquery代碼實(shí)現(xiàn)checkbox的全選反選功能。通過(guò)在網(wǎng)頁(yè)中加上相應(yīng)的HTML和CSS樣式，就可以使用全選反選功能了。