Bỏ chọn tất cả các hộp kiểm khác

Question

Tôi cần xóa tất cả các hộp kiểm khác khi người dùng nhấp vào hộp kiểm. Khá nhiều hành vi tương tự như một nút radio. Hộp kiểm nhấp chuột của người dùng 'A' và các hộp kiểm 'B' và 'C' đều không được chọn. Tôi đang sử dụng jquery nhưng tôi không thể tìm ra cách để thực hiện điều này. Ý tưởng nào?

Dưới đây là cách các hộp kiểm được thiết lập u:

<div class="sales_block_one"> 
<span class="sales_box_option_set"><input type="checkbox" value="1" id="exopt10i11553501716" name="optset[0][id]" /><label for="exopt10i11553501716">Test + &pound;100.00</label></span> 
<span class="sales_box_option_set"><input type="checkbox" value="2" id="exopt11i21553501716" name="optset[1][id]" /><label for="exopt11i21553501716">Test + &pound; 200.00</label></span> 
<span class="sales_box_option_set"><input type="checkbox" value="3" id="exopt12i31553501716" name="optset[2][id]" /><label for="exopt12i31553501716">Test 3 + &pound;400.00</label></span> 
</div> 

Answer 1

nếu tất cả các hộp kiểm bên là anh chị em, nó chỉ là như thế này,

$(':checkbox').change(function(){ 

    if (this.checked) { 
     $(this).siblings(':checkbox').attr('checked',false); 
    } 

}); 

crazy demo

Vâng, nếu bạn thực sự muốn để sao chép hành vi của nút radio, đơn giản như thế này,

$(':checkbox').change(function(){ 
     this.checked = true; 
     $(this).siblings(':checkbox').attr('checked',false);  
}); 

crazy demo

---

anh chị em là khi các yếu tố có một cùng phụ huynh/container.

mẫu

<div> 

<input type="checkbox" /><label>A</label> 
<input type="checkbox" /><label>B</label> 
<input type="checkbox" /><label>C</label> 
<input type="checkbox" />​<label>D</label> 

</div> 

trong đó, <input> s và <label> s là anh chị em ruột.

---

Trong trường hợp của bạn, mà nó không phải là anh chị em, bạn có thể làm theo cách này,

$('.sales_block_one :checkbox').change(function() { 
    var $self = this; // save the current object - checkbox that was clicked. 
    $self.checked = true; // make the clicked checkbox checked no matter what. 
    $($self).closest('span') // find the closest parent span... 
     .siblings('span.sales_box_option_set') // get the siblings of the span 
     .find(':checkbox').attr('checked',false); // then find the checbox inside each span and then uncheck it. 
});​ 

crazy demo

more about traversing

Answer 2

$("#checkboxA").click(function() { 
    var checkedStatus = this.checked; 
    $("#checkboxB_And_C_Selector").each(function() { 
     this.checked = !checkedStatus; 
    }); 
});