Checkbox是HTML表單中常用的一種輸入框類型,其可以讓用戶多選,常見(jiàn)的用途包括選擇商品、新聞分類等。在前端開(kāi)發(fā)時(shí),我們通常會(huì)使用jQuery來(lái)獲取Checkbox的值。
// 獲取所有選中的Checkbox的值 var selectedValues = []; $("input[type='checkbox']:checked").each(function(){ selectedValues.push($(this).val()); }); // 獲取某一組Checkbox選中的數(shù)量 var checkedCount = $("input[name='group']").filter(":checked").length; // 設(shè)置某一組Checkbox的選中狀態(tài) $("input[name='group']").prop("checked", true);
上述代碼中,我們使用了jQuery選擇器來(lái)選中Checkbox元素,并使用jQuery方法獲取其值。對(duì)于獲取多個(gè)Checkbox的值,我們可以使用each方法遍歷所有選中的元素,并將其值存入一個(gè)數(shù)組中;對(duì)于獲取某一組Checkbox選中的數(shù)量,我們使用了filter方法過(guò)濾出選中的元素并獲取其長(zhǎng)度;對(duì)于設(shè)置某一組Checkbox的選中狀態(tài),我們使用了prop方法將checked屬性設(shè)為true即可。
除此之外,我們還可以對(duì)Checkbox的選中狀態(tài)進(jìn)行監(jiān)聽(tīng)并觸發(fā)事件:
$("input[type='checkbox']").change(function(){ if($(this).is(":checked")){ // 選中時(shí)的操作 }else{ // 取消選中時(shí)的操作 } });
在上述代碼中,我們使用了change方法監(jiān)聽(tīng)Checkbox的選中狀態(tài)變化,并使用is方法判斷其是否被選中。如果被選中,則在代碼塊中執(zhí)行選中時(shí)的操作,否則執(zhí)行取消選中時(shí)的操作。