Décochez toutes les autres cases

Question

Je dois décocher toutes les autres cases lorsqu'un utilisateur clique sur une case à cocher. Assez le même comportement qu'un bouton radio. L'utilisateur clique sur la case "A" et les cases "B" et "C" sont toutes deux désactivées. J'utilise jquery mais je ne peux pas comprendre comment accomplir ceci. Des idées?

Voici comment les cases sont définies 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

si toutes les cases sont frères et soeurs, il est comme ça,

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

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

}); 

crazy demo

Eh bien, si vous voulez vraiment pour copier le comportement du bouton radio, simple comme ceci,

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

crazy demo

---

fratrie est lorsque les éléments a une même parent/container.

échantillon

<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> 

en ce que, <input> s et <label> s sont frères et sœurs.

---

Dans votre cas, qu'il n'est pas frères et soeurs, vous pouvez le faire de cette façon,

$('.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; 
    }); 
});