jQuery. Làm thế nào để bỏ chọn tất cả các hộp kiểm trừ một (được kiểm tra)

Question

tôi có các mục html, 4 ví dụ:

<div> 
    <div><input type="checkbox" class="foo"> Checkbox</div> 
    <div><input type="checkbox" class="foo"> Checkbox</div> 
    <div><input type="checkbox" class="foo"> Checkbox</div> 
    <div><input type="checkbox" class="foo"> Checkbox</div> 
    <div><input type="checkbox" class="foo"> Checkbox</div> 
    <div><input type="checkbox" class="foo"> Checkbox</div> 
</div> 

Và bây giờ, tôi muốn tiếp theo: Nếu tôi nhấp vào bất kỳ hộp kiểm - hộp kiểm cần được kiểm tra và khác hộp kiểm nên được bỏ chọn. Tôi làm nó như thế nào?

Answer 1

Bạn có thể sử dụng nút radio và nhóm chúng theo thuộc tính tên. Nếu bạn phải làm điều đó với checkboxes sau đó bạn có thể làm theo cách này,

Live Demo

$('.foo').click(function(){  
     $('.foo').attr('checked', false); 
     $(this).attr('checked', true);   
}); 

Đối tạo động html bạn cần on cho phép bạn giao phó sự kiện này với bố mẹ tĩnh, bạn có thể sử dụng tài liệu với bạn không biết cha mẹ tĩnh.

$(document).on('click','.foo', function(){  
     $('.foo').attr('checked', false); 
     $(this).attr('checked', true);   
}); 

Tài liệu có thể được thay thế bằng phụ huynh tĩnh nếu được biết. ví dụ. nếu div chứa tạo động có id parentdiv sau đó bạn có thể có

`$('#parentdiv').on('click','.foo', function(){` 

Sửa

Sử dụng prop thay vì attr đối với tài sản checked, selected, hoặc disabled theo tài liệu hướng dẫn.

Kể từ jQuery 1.6, phương thức .attr() trả về không xác định cho thuộc tính chưa được đặt. Để truy xuất và thay đổi các thuộc tính DOM chẳng hạn như trạng thái biểu mẫu đã chọn, đã chọn hoặc vô hiệu hóa, hãy sử dụng phương thức .prop().

Answer 2

Dưới đây là một chút tôi tình cờ được làm việc trên:

.siblings("input[type='checkbox']").attr("checked", true); 

sẽ chọn tất cả các hộp kiểm trừ một trong đó được nhấp.

$("input[type=checkbox]").on("click", function() { 
 

 
    if ($(this).val() == "none") { 
 
    
 
    $(this).siblings("input[type=checkbox]").attr('checked', false); 
 
    
 
    } else { 
 
    
 
    $(this).siblings("input[value=none]").attr('checked', false); 
 

 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 

 
    <input type="checkbox" id="worker-soft-eaglesoft" checked><label for="worker-soft-eaglesoft">&nbsp;Eaglesoft</label><br> 
 
    <input type="checkbox" id="worker-soft-dentrix"><label for="worker-soft-dentrix">&nbsp;Dentrix</label><br> 
 
    <input type="checkbox" id="worker-soft-softDent"><label for="worker-soft-softDent">&nbsp;Soft-Dent</label><br> 
 
    <input type="checkbox" id="worker-soft-denticon"><label for="worker-soft-denticon">&nbsp;Denticon</label><br> 
 
    <input type="checkbox" id="worker-soft-other"><label for="worker-soft-other">&nbsp;Other</label><br> 
 

 
    <input type="checkbox" id="worker-soft-none" value="none"> 
 
    <label for="worker-soft-none">&nbsp;No Software Experience - Paper Records Only</label><br> 
 
</div>