2011-01-25 61 views
14

Tôi muốn đếm số lượng hộp kiểm trên trang của tôi được chọn bằng cách sử dụng jQuery. Tôi đã viết mã sau:Làm cách nào để đếm số lượng hộp kiểm được chọn trên một trang với jQuery

 var numberOfCheckboxesSelected = 0; 
     $(':checkbox').each(function(checkbox) { 
      if (checkbox.attr('checked')) 
       numberOfCheckboxesSelected++; 
     }); 

Tuy nhiên, mã lỗi của tôi với thông báo "Đối tượng không hỗ trợ thuộc tính hoặc phương pháp này" trên dòng thứ ba.

Làm cách nào để tính số lượng hộp kiểm được chọn trên trang của tôi?

Trả lời

35

jQuery hỗ trợ :checked bộ chọn giả.

var n = $("input:checked").length; 

Thao tác này sẽ hoạt động cho nút radio cũng như hộp kiểm. Nếu bạn chỉ muốn hộp kiểm, nhưng cũng có nút radio trên trang:

var n = $("input:checkbox:checked").length; 
+3

Bạn nên nhập 'hộp kiểm: hộp kiểm' thay vì chỉ': hộp kiểm' để jQuery không xem xét tất cả * tất cả * phần tử trên trang. – user113716

+3

@patrick được ghi nhận và cập nhật một cách hợp lệ, cảm ơn! – Stephen

5

Hãy thử điều này (để tránh đếm bất kỳ nút radio được chọn):

var numberOfCheckboxesSelected = $('input[type=checkbox]:checked').length; 
2

Đối số đầu tiên truyền cho callback trong each là chỉ mục, không phải là phần tử. Bạn nên sử dụng this hoặc một cuộc tranh luận thứ hai:

$(':checkbox').each(function(idx, checkbox) { 
     if (checkbox.attr('checked')) 
      numberOfCheckboxesSelected++; 
}); 

Hơn nữa, cách dễ dàng hơn để làm điều này là để chỉ chọn các yếu tố kiểm tra với bộ chọn :checked và sau đó kiểm tra length tài sản của lựa chọn:

var numberOfCheckboxesSelected = $('input:checkbox:checked').length; 
1
$("input:checked").length 

điều này sẽ trả về tổng số hộp kiểm đã chọn.

Các vấn đề liên quan