Sử dụng JQuery để chọn hộp kiểm trong danh sách mục phụ huynh?

Question

Tôi là người mới sử dụng Javascript và JQuery, vì vậy tôi đã đọc và cố gắng kiểm tra (và đặt không hoạt động) hộp kiểm trong danh sách phụ huynh khi một trong các trẻ em được chọn.

Nếu điều này không có ý nghĩa gì, hãy xem cấu trúc danh sách.

<ul> 
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003" /> Parent 1</li> 
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003" /> Parent 2 
     <ul> 
      <li><input type="checkbox" name="items[]" value="21312341" id="21312341" /> Child 1</li> 
      <li><input type="checkbox" name="items[]" value="21312341" id="21312341" /> Child 2</li> 
     </ul> 
    </li> 
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003" /> Parent 3</li> 
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003" /> Parent 4</li> 
</ul> 

Nếu chọn Child 1 hoặc Child 2, tôi muốn đầu vào trong Parent 2 được kiểm tra và đặt không hoạt động. Tôi đã bắt đầu làm việc trên đó, nhưng bị kẹt ở đây:

$(function(){ 
    $('.child').click(function() { 
     $(this).parent().parent().parent().toggle(); 
    }); 
}); 

Như bạn có thể thấy, tôi đã không làm cho nó xa. Bất kỳ trợ giúp sẽ được đánh giá cao.

Cảm ơn!

Answer 1

Hãy thử điều này:

<script type="text/javascript"> 
$(function(){ 
    $('li ul input[type=checkbox]').click(function() { 
       var that = $(this); 
       var parentUL = that.parent().parent(); 
     var parentChk = parentUL.parent().find("input:first"); 
       var oneChecked = false; 
       parentUL.find("input").each(function(){oneChecked = oneChecked || this.checked;}); 
       console.log(oneChecked); 
       parentChk.attr("checked", oneChecked); 
    }); 
}); 
</script> 

Answer 2

phương thức .parent() chỉ trả về phần tử DOM mẹ trực tiếp của bộ chọn hiện tại của bạn. Phương thức .parents() sẽ tìm kiếm cây DOM để tìm bất kỳ phần tử cha nào khớp với lựa chọn. Vì vậy, $ (". Bar"). Cha mẹ (". Foo") sẽ chọn cho tất cả các yếu tố cha với Class "foo" của bất kỳ yếu tố với lớp "bar".

Đầu tiên cung cấp cho phần tử cha mục tiêu của bạn một thuộc tính có thể nhận dạng, một lớp hoặc một id. Nếu bạn đang đối phó với ID, bạn sẽ không cần cha mẹ(), do đó, sử dụng một lớp học.

$(".child").click(function(){ 
    $(this).parents('.parentclass').toggle(); 
}); 

Answer 3

Dựa trên đánh dấu mà bạn đã viết, điều này sẽ làm việc:

$('ul > li ul li > :checkbox').change(function() { 
    $(this).parents('li:last') 
      .children("input") 
      .attr("disabled", this.checked); 
}); 

Cũng lưu ý:

• Bạn có số và lặp lại ID, là invalid.
• Bạn không có bất kỳ lớp nào có tên 'con' trong tài liệu của bạn.
• .toggle "hiển thị hoặc ẩn các phần tử phù hợp". Nó không không chuyển đổi thuộc tính 'đã tắt' của chúng.

Hãy thử nó ở đây: http://jsfiddle.net/karim79/QfTfr/

Answer 4

Kiểm tra này fillde

$("input:checkbox + ul input:checkbox").click(function(){ 
    var $ul = $(this).closest("ul"); 
    var $parent = $ul.prev("input:checkbox"); 
    if($ul.find("input:checkbox:checked").length > 0){ 
     $parent.attr("checked", "checked"); 
    }else{ 
     $parent.attr("checked", ""); 
    } 
}) 

Nếu bạn đang sử dụng id tài sản cho các yếu tố, bạn phải thực hiện chắc chắn rằng nó có một giá trị duy nhất trong tài liệu.