3

I have checkboxes that need to act in a similar fashion to radio button controls. Essentially when one is checked all others need to be unchecked. How can I achieve this with as little pain as possible?

So to summarise. If a checkbox is checked, all others (siblings) must then be unchecked leaving the clicked one checkstate untouched.

I already know how to uncheck all checkboxes but if I did this, I would have to first store the checked state of the checkbox that was checked, then reapply it after unchecking all checkboxes. I wondered if there was a way of doing this with some fancy jQuery selectors or some such.

Chris
  • 26,744
  • 48
  • 193
  • 345
  • check http://stackoverflow.com/questions/2279760/how-to-reset-all-checkboxes-using-jquery-or-javascript – JakeParis Feb 08 '11 at 16:50
  • I know how to do that, I'm really looking for better way than storing the state of the original checkbox then reapplying it. – Chris Feb 08 '11 at 16:51

4 Answers4

10

By using radio buttons. Seriously, radio buttons are there for a reason. People expect radio buttons to be a "1 out of n" selection and checkboxes to be a "0 up to n" selection.

Anyway, here's the code:

$('input:checkbox').click(function() {
    $(this).siblings('input:checkbox').removeAttr('checked');
});

Demo: http://jsfiddle.net/ThiefMaster/AVEjt/

But please, only use it if you actually need to allow the user to uncheck everything. Then it's acceptable - otherwise radio buttons are much better.

ThiefMaster
  • 310,957
  • 84
  • 592
  • 636
  • I'm sure he's got a valid reason for using them. This is really a comment and not an answer. – Thomas Clayson Feb 08 '11 at 16:52
  • - my -1 for actually helping in the end. – Thomas Clayson Feb 08 '11 at 16:54
  • I've included the answer half a minute after posting the "comment". ;) – ThiefMaster Feb 08 '11 at 16:55
  • Thanks for the suggestion but it is not appropriate to use them for my application – Chris Feb 08 '11 at 16:56
  • @Thief No need for `.not(this)`. The `this` element is not part of `$(this).siblings()`. – Šime Vidas Feb 08 '11 at 17:02
  • of course if your checkboxes aren't all within exact same parent element (e.g. if you have them layed out within a table) the `siblings()` method won't work – Alnitak Feb 08 '11 at 20:02
  • As a note, I've come across an actual reason for needing this. I have a range of checkboxes that need to allow N selected if a previous field is selected, or allow 1 if it is not. This is better than changing the input type visually, so sometimes this is warranted. – Jeremy B. Sep 13 '11 at 18:17
2

Try this:

$(':checkbox').not( selector_for_current ).attr('checked', false);

Where selector_for_current is the "current one", often this if you're in a callback.

Alnitak
  • 334,560
  • 70
  • 407
  • 495
  • Do I need to use `$(this)` or will just `this` suffice as it is within a jQuery function? – Chris Feb 08 '11 at 16:54
  • 2
    `this` is the DOM element (inside an event handler etc), `$(this)` a jQuery object. As a `.not()` argument a DOM element is perfectly fine. – ThiefMaster Feb 08 '11 at 16:55
0

Try this:

$(function() {
    $("input[type=checkbox]").click(function(){
        $(this).siblings("input[type=checkbox]:not(this)").attr("checked", "");
    });
});

See example.

Richard Marskell - Drackir
  • 13,080
  • 3
  • 33
  • 54
0

As an alternative to ThiefMaster's very good answer you could register the event on the parent form and catch all checkboxes, including those nested in a fieldset (or some other element) that would be missed using "siblings".

$("#myform").click(function(e) {
    if ($(e.target).is("input:checkbox")) {
        $("input:checkbox", this).not(e.target).removeAttr("checked");
    }
})

Demo: http://jsfiddle.net/Gs3wa/

Wayne
  • 59,728
  • 15
  • 131
  • 126