I need to clear all other checkboxes when a user clicks a checkbox. Pretty much the same behavior as a radio button. User clicks checkbox 'A' and checkboxes 'B' and 'C' are both unchecked. I am using jquery but I can't figure out how to accomplish this. Any ideas?

Here are how the checkboxes are set 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>

I need to clear all other checkboxes when a user clicks a checkbox. Pretty much the same behavior as a radio button. User clicks checkbox 'A' and checkboxes 'B' and 'C' are both unchecked. I am using jquery but I can't figure out how to accomplish this. Any ideas?

Here are how the checkboxes are set 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>

• javascript
• jquery
• html
• css

• 2 why you're not use radiobutton? that's a simple way. – klox Commented Oct 14, 2010 at 9:09
• 1 @klox - maybe the OP want the check ( ☑ ) on the design ;) – Reigel Gallarde Commented Oct 14, 2010 at 9:12
• Yes, I know radio buttons would be ideal but they can't be used in application. – Thomas Commented Oct 14, 2010 at 9:12
• Why is that voted down? I mean its a weird usecase (unless its something like "non of the above" or something ... bu even still) , but judging from the Text he seams to be aware of the fact that hes copying radio-box behavior to some extend. – Hannes Commented Oct 14, 2010 at 9:13
• using siblings solves the problem; radio button behavior. But what's the behavior when you check/uncheck B and C(other checkboxes) – Ketan Khairnar Commented Oct 14, 2010 at 9:14

2 Answers 2

if all the checkboxes are siblings, it's just like this,

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

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

});

crazy demo

Well, if you really want to copy the behavior of the radio button, simple as this,

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

crazy demo

siblings is when the elements has one same parent/container.

sample

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

in that, <input>s and <label>s are siblings.

In your case, which it's not siblings, you can do it this way,

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

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