我怎麼能檢查嵌套複選框

Question

的所有UL

問：

我有一個類上市有些類別有孩子，我想創建一個所有的類別，點擊後會檢查所有同級複選框，在同一類別。

例如;點擊ALL的MUSIC類別下會檢查blues, jazz, rock n roll

代碼：

HTML：

<ul name="events-categories" id="events-categories"> 
    <li><input type="checkbox" name="category-events" value="185" placeholder="" id="category-185" class="events-category"> CONVENTIONS 
     <ul class="event-children"> 
      <li><input type="checkbox" name="child-category-all" value="" class="events-child-category-all">ALL</li> 
      <li><input type="checkbox" name="child-category-190" value="190" id="child-category-190" class="child events-child-category">SCIENCE</li> 
      <li><input type="checkbox" name="child-category-191" value="191" id="child-category-191" class="child events-child-category">TECHNOLOGY</li> 
     </ul> 
    </li> 
    <li><input type="checkbox" name="category-events" value="184" placeholder="" id="category-184" class="events-category"> MUSIC 
     <ul class="event-children"> 
      <li><input type="checkbox" name="child-category-all" value="" class="events-child-category-all">ALL</li> 
      <li><input type="checkbox" name="child-category-189" value="189" id="child-category-189" class="child events-child-category">BLUES</li> 
      <li><input type="checkbox" name="child-category-188" value="188" id="child-category-188" class="child events-child-category">JAZZ</li> 
      <li><input type="checkbox" name="child-category-187" value="187" id="child-category-187" class="child events-child-category">ROCK N ROLL</li> 
     </ul> 
    </li> 
    <li><input type="checkbox" name="category-events" value="186" placeholder="" id="category-186" class="events-category"> TRIBUTES</li> 
</ul>​ 

CSS：

.event-children { 
    margin-left: 20px; 
    list-style: none; 
    display: none; 
}​ 

jQuery的這麼遠：

/** 
* left sidebar events categories 
* toggle sub categories 
*/ 
$('.events-category').change(function(){ 
    console.log('showing sub categories'); 
    var c = this.checked; 
    if(c){ 
     $(this).next('.event-children').css('display', 'block'); 
    }else{ 
     $(this).next('.event-children').css('display', 'none'); 
    } 
}); 

$('.events-child-category-all').change(function(){ 
    var c = this.checked; 
    if(c){ 
     $(this).siblings(':checkbox').attr('checked',true); 
    }else{ 
     $(this).siblings(':checkbox').attr('checked',false); 
    } 
});​ 

的jsfiddle：http://jsfiddle.net/SENV8/

Answer 1

$('.events-child-category-all').change(function(){ 
    $(this).parent().siblings().find(':checkbox').attr('checked', this.checked); 
});​ 

http://jsfiddle.net/SENV8/3/

Answer 2

你需要的是這樣的，因爲這些checkboxes沒有siblings

$('.events-child-category-all').change(function(){ 
    var c = this.checked; 
    if(c){ 
     $(this).closest('.event-children').find(':checkbox').attr('checked',true); 
    }else{ 
     $(this).closest('.event-children').find(':checkbox').attr('checked',false); 
    } 
});​ 

Working Fiddle

Answer 3

也許是這樣的：

$(".events-child-category-all").click(function() { 
    $(this).closest("ul").find("input[type=checkbox]").prop("checked",this.checked); 
}); 

的.closest() method遍歷了DOM樹查找匹配的元素，在這種情況下，找到「UL」，該複選框位於英寸

如果您使用的是jQuery的版本早於1.6您需要.attr()而不是.prop()。

Answer 4

http://jsfiddle.net/ahren/SENV8/2/

$('.events-child-category-all').change(function(){ 
    var c = this.checked; 
    if(c){ 
     $(this).parent().siblings().find(':checkbox').prop('checked',true); 
    }else{ 
     $(this).parent().siblings().find(':checkbox').prop('checked',false); 
    } 
});​ 

沒有siblings到輸入端，change燒製而成。您首先需要向上級li上一級，然後抓住它的siblings，並使用find()獲取其複選框。或者你可以使用的children()代替find()