遍歷UL家長和取消選中複選框使用jQuery

<ul> 
    <li> 
     <label for="category_125" class="checkbox"> 
     <input type="checkbox" checked="checked" name="categories[]" value="125" id="category_125">Clothing</label> 
     <ul> 
      <li> 
       <label for="category_126" class="checkbox"> 
       <input type="checkbox" name="categories[]" value="126" id="category_126">Denim</label> 
       <ul> 
        <li> 
         <label for="category_127" class="checkbox"> 
         <input type="checkbox" checked="checked" name="categories[]" value="127" id="category_127">Jeans</label> 
        </li> 
       </ul> 
      </li> 
     </ul> 
     <ul> 
      <li> 
       <label for="category_144" class="checkbox"> 
       <input type="checkbox" name="categories[]" value="144" id="category_144">Trousers</label> 
       <ul> 
        <li> 
         <label for="category_146" class="checkbox"> 
         <input type="checkbox" name="categories[]" value="146" id="category_146">Bermudas</label> 
        </li> 
       </ul> 
      </li> 
     </ul> 
     <ul> 
      <li> 
       <label for="category_152" class="checkbox"> 
       <input type="checkbox" name="categories[]" value="152" id="category_152">Sweaters</label> 
       <ul> 
        <li> 
         <label for="category_154" class="checkbox"> 
         <input type="checkbox" name="categories[]" value="154" id="category_154">Sweaters</label> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul>

鑑於上述HTML代碼，讓我們說我點擊「牛仔」（從頂部第三輸入，ID =「category_127」）。我想要取消所有父母的輸入（牛仔布和服裝）。我想離開牛仔褲的兄弟姐妹，因爲它們是。我該如何做到這一點使用jQuery？有不確定數量的嵌套輸入。遍歷UL家長和取消選中複選框使用jQuery

謝謝！

來源

2012-05-09 koichirose

試試這個代碼：

$(":checkbox").on("change", function() { 
    var $this = $(this); 
    var checked = $this.prop("checked"); 
    if (!checked) { 
     $this.parent().siblings("ul").find(":checkbox:checked").prop("checked", false); 
    } 

    if ($this.closest("ul").find(":checkbox:checked").not(this).length == 0) { 
     $this.parents("ul").each(function() { 
      if ($(this).siblings("ul").find(":checkbox:checked").length == 0) { 
       $(this).siblings("label").children().prop("checked", checked); 
      } 
     }); 
    } 
});

它將取消父母的複選框只如果沒有檢查並行類元素。例如，如果選中「褲子」和/或「百慕大」並且取消選中「牛仔褲」，則「衣服」不會被取消選中。

DEMO：http://jsfiddle.net/6EDw4/1/

來源

2012-05-09 17:49:24 VisioN

謝謝你，你的代碼是一個很好的起點。你說什麼不取消衣服對我來說並不是真的，因爲離開衣服檢查將顯示來自所有服裝子類別的產品（我不希望這樣）。我今天會進行這項工作，看看我能修好它再次:)謝謝 – koichirose

@koichirose事實上，這是第一個回答：http://jsfiddle.net/6EDw4/。也許它也會幫助你。 – VisioN

遍歷UL家長和取消選中複選框使用jQuery

回答

相關問題