JQuery kiện ràng buộc nhấp chuột để hộp kiểm

Question

Dưới đây là một cái nhìn cơ bản về những gì html của tôi trông giống như:

<form> 
    <div id="part1"> 
    // some html form elements including checkboxes 
    </div> 
    <div id="part2"> 
    // more html code with more checkboxes 
    </div> 
    <div id=part2"> 
    // data table with numerous checkboxes built dynamically 
    </div 
</form> 

Những gì tôi cần làm là liên kết sự kiện .click() vào hộp kiểm trong phần 1, 2, và 3 riêng rẽ. Tôi đã thử điều này $('#part1:checkbox').click(...) nhưng điều đó không làm việc. Nếu tôi sử dụng $("form :checkbox").click(...) cùng một sự kiện nhấp được ràng buộc với tất cả các hộp kiểm và không chỉ một bộ. Làm thế nào tôi có thể tách chúng?

Answer 1

Bạn sắp hoàn tất. Bạn chỉ cần một không gian để tách các selector hậu duệ:

$('#part1 :checkbox').click(function(){ 
    // code goes here 
}); 

Để tăng hiệu suất, bạn có thể muốn sử dụng này:

$('#part1 input[type=checkbox]').click(function(){ 
    // code goes here 
}); 

Answer 2

Sử dụng này:

$('#part1 input:checkbox').click(...) 

http://api.jquery.com/checkbox-selector/

Answer 3

Hoặc bạn cho cùng một tên lớp cho tất cả các hộp kiểm và cung cấp ID div tương ứng cho hộp kiểm cũng vậy, vì vậy, bạn có thể sử dụng mã sau,

<input type="checkbox" class="checkall" id="part1">Part 1 

và tập lệnh của bạn giống như thế này.

$('.checkall').click(function() { 
if (this.checked == false) { 
$("." + $(this).attr("id")).hide(); 
} 
}); 

Answer 4

Tôi gặp sự cố tương tự và trang StackOverflow này là câu trả lời đầu tiên tôi gặp phải nhưng không thực sự hài lòng với nó. Tôi tìm thấy bài viết này https://www.kevinleary.net/jquery-checkbox-checked/ với giải pháp tốt hơn.

$('input[name="subscribe"]').on('click', function(){ 
    if ($(this).is(':checked')) { 
     $('input[name="email"]').show(); 
    } 
    else { 
     $('input[name="email"]').hide(); 
    } 
});