jQuery checkbox級聯(lián),指的是多個checkbox之間的關(guān)聯(lián),在其中選擇一個后,其他相關(guān)的checkbox也會被選中或取消選中。
下面是一個簡單的例子:
<input type="checkbox" id="parent">父節(jié)點1 <br> <input type="checkbox" class="child" data-parent="parent">子節(jié)點1 <br> <input type="checkbox" class="child" data-parent="parent">子節(jié)點2 <br> <input type="checkbox" id="parent2">父節(jié)點2 <br> <input type="checkbox" class="child" data-parent="parent2">子節(jié)點3 <br> <input type="checkbox" class="child" data-parent="parent2">子節(jié)點4
在這個例子中,父節(jié)點用id表示,子節(jié)點用class表示,并通過data-parent屬性與父節(jié)點連接起來。
下面是jQuery代碼:
$(document).ready(function(){ $(".child").click(function(){ var parent = $("#" + $(this).data("parent")); var allChildren = parent.nextUntil(":not(.child)"); if ($(this).is(":checked")) { parent.prop("checked", true); allChildren.prop("checked", true); } else { allChildren.prop("checked", false); if (parent.is(":checked")) { parent.prop("checked", false); } } }); });
在這個代碼中,我們?yōu)槊總€子節(jié)點添加了一個click事件。當(dāng)子節(jié)點被點擊時,我們通過data-parent屬性獲取其父節(jié)點。然后,我們使用nextUntil函數(shù)找到所有與該父節(jié)點相關(guān)的子節(jié)點。
如果點擊的子節(jié)點是選中的,則將該父節(jié)點和所有相關(guān)的子節(jié)點都設(shè)為選中狀態(tài)。如果該子節(jié)點未選中,則將所有相關(guān)的子節(jié)點都取消選中狀態(tài)。如果所有相關(guān)的子節(jié)點都未選中,則將該父節(jié)點也取消選中狀態(tài)。
這是一個基本的jQuery checkbox級聯(lián)的例子。你可以根據(jù)自己的需求來改變代碼。同樣,你也可以使用其他的常用庫來實現(xiàn)該功能。