Nhấp vào các hàng trong bảng để chọn hộp kiểm bằng cách sử dụng jQuery

Question

Vì tôi không tìm thấy bất kỳ câu hỏi nào được hỏi trước đây, về cách bật hộp kiểm trên nhấp vào một hàng của bảng, nên tôi muốn chia sẻ ...

Answer 1

Thứ tự để chọn hộp kiểm của một hàng bên trong bảng, trước tiên chúng tôi sẽ kiểm tra xem typeattribute của phần tử chúng tôi đang nhắm mục tiêu không phải là hộp kiểm hay không.

$(document).ready(function() { 
    $('.record_table tr').click(function(event) { 
    if (event.target.type !== 'checkbox') { 
     $(':checkbox', this).trigger('click'); 
    } 
    }); 
}); 

Demo

---

Nếu bạn muốn làm nổi bật các dòng của bảng trên checkboxchecked hơn chúng ta có thể sử dụng một điều kiện if với is(":checked"), nếu có hơn chúng ta tìm ra tr yếu tố gần gũi nhất sử dụng .closest() và hơn chúng ta thêm lớp vào nó bằng cách sử dụng addClass()

$("input[type='checkbox']").change(function (e) { 
    if ($(this).is(":checked")) { //If the checkbox is checked 
     $(this).closest('tr').addClass("highlight_row"); 
     //Add class on checkbox checked 
    } else { 
     $(this).closest('tr').removeClass("highlight_row"); 
     //Remove class on checkbox uncheck 
    } 
}); 

Demo

Answer 2

Câu hỏi này hữu ích cho tôi nhưng tôi gặp sự cố với giải pháp trước đó. Nếu bạn nhấp vào liên kết trong ô bảng, nó sẽ kích hoạt hộp kiểm chuyển đổi. Tôi googled này và tôi thấy một đề xuất thêm một event.stopPropagation() vào các liên kết của bảng, như thế này:

$('.record_table tr a').click(function(event) { 
    event.stopPropagation(); 
}); 

Giải pháp này là một ý tưởng tồi vì tôi đã có một số jquery popover bootstrap vào một liên kết của bảng. ..

Vì vậy, đây là giải pháp phù hợp với tôi tốt hơn. Bằng cách này khi tôi đang sử dụng bootstrap 2.3, điểm nổi bật của dòng được thực hiện bằng cách thêm lớp "thông tin" vào tr. Để sử dụng mã này, bạn chỉ cần thêm class="selectable" vào thẻ bảng.

$(".selectable tbody tr input[type=checkbox]").change(function(e){ 
    if (e.target.checked) 
    $(this).closest("tr").addClass("info"); 
    else 
    $(this).closest("tr").removeClass("info"); 
}); 

$(".selectable tbody tr").click(function(e){ 
    if (e.target.type != 'checkbox' && e.target.tagName != 'A'){ 
    var cb = $(this).find("input[type=checkbox]"); 
    cb.trigger('click'); 
    } 
}); 

Có thể bạn sẽ muốn cụ thể hơn với điều kiện thử nghiệm, ví dụ nếu bạn có các yếu tố đầu vào khác trong hàng.

Answer 3

Bạn chỉ có thể kích hoạt sự kiện nhấp chuột này ... :)

$(document).ready(function() 
    { 
     $("table tr th :checkbox").click(function(event) 
     { 
     $('tbody :checkbox').trigger('click'); 
     }); 
    }); 

HOẶC

$(document).ready(function() 
    { 
     $("table tr th :checkbox").on('click',function(event) 
     { 
     $('tbody :checkbox').trigger('click'); 
     }); 
    }); 

Answer 4

Triggering một nhấp chuột như rất nhiều các giải pháp cung cấp ở trên sẽ gây ra các chức năng để chạy hai lần. Cập nhật giá trị prop thay vì:

$('tr').click(function(event){ 
    alert('function runs twice'); 
    if(event.target.type !== 'checkbox'){ 
    //$(':checkbox', this).trigger('click'); 
    // Change property instead 
    $(':checkbox', this).prop('checked', true); 
    } 
}); 

Link to jsfiddle example here

Answer 5

Mặc dù @Mr chấp nhận. Câu trả lời của người nước ngoài hoạt động tuyệt vời, nó không hoạt động trong trường hợp bạn quyết định thêm một hàng mới <tr> động với jQuery tại một số điểm.

Tôi khuyên bạn nên sử dụng phương thức ủy quyền sự kiện, đây chỉ là một sửa đổi nhỏ về câu trả lời được chấp nhận.

Thay vì:

... $('.record_table tr').click(function(event) { ...

sử dụng

... $('.record_table').on('click', 'tr', function(event) { ...

Và tương tự cho làm nổi bật, sử dụng:

... $(".record_table").on('change', "input[type='checkbox']", function (e) { ...

Thông tin thêm tại đây: Click event doesn't fire for table rows added dynamically