Kiểm tra hộp kiểm jQuery/bỏ chọn

Question

Điều gì sẽ là một cách thích hợp để kiểm tra/bỏ chọn hộp kiểm được đặt bên trong phần tử kích hoạt chức năng của tôi?

Dưới đây là mã của tôi:

<table id="news_list"> 
<tr> 
    <td><input type="checkbox" name="news[1]" /></td> 
    <td>TEXT</td> 
</tr></table> 

$("#news_list tr").click(function() { 
    var ele = $(this).find('input'); 
    if(ele.is(':checked')){ 
     ele.removeAttr('checked'); 
     $(this).removeClass('admin_checked'); 
    }else{ 
     ele.attr('checked', 'checked'); 
     $(this).addClass('admin_checked'); 
    } 
}); 

Vấn đề là tôi có thể kiểm tra và bỏ chọn mỗi hộp chỉ một lần. Sau khi tôi đã kiểm tra và bỏ chọn đôi khi nó vẫn làm thêm/loại bỏ lớp, nhưng không bao giờ kiểm tra một hộp một lần nữa (ngay cả khi tôi bấm vào hộp kiểm, không phải hàng bảng).

Tôi đã thử sử dụng trình kích hoạt .bind ('click') nhưng kết quả tương tự.

Bất kỳ giải pháp nào?

Answer 1

Sử dụng .prop() thay vào đó và nếu chúng ta đi với mã của bạn sau đó so sánh như thế này:

Nhìn vào ví dụ jsbin:

$("#news_list tr").click(function() { 
    var ele = $(this).find(':checkbox'); 
    if ($(':checked').length) { 
     ele.prop('checked', false); 
     $(this).removeClass('admin_checked'); 
    } else { 
     ele.prop('checked', true); 
     $(this).addClass('admin_checked'); 
    } 
}); 

Thay đổi:

1. Đã thay đổi input thành :checkbox.
2. So sánh the length của số checked checkboxes.

Answer 2

Sử dụng giá trị prop() thay vì attr() để đặt giá trị checked. Cũng sử dụng :checkbox trong phương thức tìm kiếm thay vì input và cụ thể.

Live Demo

$("#news_list tr").click(function() { 
    var ele = $(this).find('input'); 
    if(ele.is(':checked')){ 
     ele.prop('checked', false); 
     $(this).removeClass('admin_checked'); 
    }else{ 
     ele.prop('checked', true); 
     $(this).addClass('admin_checked'); 
    } 
}); 

Use prop instead of attr for properties like checked

Tính đến jQuery 1.6, phương pháp .attr() trả về undefined cho các thuộc tính chưa được thiết lập. Để lấy và thay đổi thuộc tính DOM như các kiểm tra, lựa chọn, hay vô hiệu hóa trạng thái của các yếu tố hình thức, sử dụng .prop() phương pháp

Answer 3

$('mainCheckBox').click(function(){ 
    if($(this).prop('checked')){ 
     $('theControledCheckBoxes').prop('checked', true); 
    }else{ 
     $('theControledCheckBoxes').prop('checked', false); 
    } 
});