Allow checkbox group to be selected only once or none

Question

I have the following checkboxes:

<input type='checkbox' value='1' class='unique group1'>
<input type='checkbox' value='2' class='unique group1'>

<input type='checkbox' value='1' class='unique group2'>
<input type='checkbox' value='2' class='unique group2'>

I need to allow only one checkbox to be selected (as radio button) or also no checkbox to be selected.

I was trying the following JQuery code:

$('input.unique').click(function() {
    $unique.removeAttr('checked');
    $(this).prop('checked', true);
});

But this treats all check boxes as being the same group but I have two groups.

How can I solve this?

UPDATE

If it makes it easy I could use only one class and data-group:

<input type='checkbox' value='1' class='unique' data-group='group1'>
<input type='checkbox' value='2' class='unique' data-group='group1'>

<input type='checkbox' value='1' class='unique' data-group='group2'>
<input type='checkbox' value='2' class='unique' data-group='group2'>

The reason I am not using name to select the groups is because this is being rendered by server side code and all names are different ...

So basically I need to find all checkboxes with class="unique" and then allow only none or one checkbox to be selected in each group, given by data-group.

Checkboxes should have a name attribute. Also, if you want them to behave like radio buttons, then use radio buttons. Users expect a certain continuity when using an interface. — j08691, Sep 02 '14 at 20:29
Also for `checked` you should use `.prop()` instead of `.attr()` — DarkAjax, Sep 02 '14 at 20:31
I can't use radio because I need to allow the user to not select any checkbox ... — Miguel Moura, Sep 02 '14 at 20:32
@MDMoura It is possible to 1) not require a radio selection, and 2) deselect a radio control. — admdrew, Sep 02 '14 at 20:34
@admdrew Is it possible to deselect a radio control? What do you mean? — Miguel Moura, Sep 02 '14 at 20:36
@MDMoura Radio controls can't natively be deselected/unchecked, but you can [easily do this with some javascript](http://stackoverflow.com/questions/2117538/how-to-uncheck-a-radio-button). — admdrew, Sep 02 '14 at 20:38
@admdrew I see, that is an option to ... But I would also like to make this work ... Basically "Unique" class would trigger the JQuery to be applied and "Group1" class or any other group class would say to which checkboxes apply ... — Miguel Moura, Sep 02 '14 at 20:43
@MDMoura: Can you use radio buttons but have an extra "none" radio button to represent no selection? — Matt Burland, Sep 02 '14 at 21:09
@MattBurland I can't because of the server side code I am using. — Miguel Moura, Sep 02 '14 at 21:45

Erik Philips · Accepted Answer · 2014-09-03T17:54:00.170

2

I think you're looking for:

$('input.unique').click(function() {
  if (!$(this).prop('checked'))
  {
    return;
  }
  var group = $(this).data('group');
  if (group)
  {
    $('input[data-group="' + group + '"]:checked').prop('checked', false);
    $(this).prop('checked', true);
  }
});

Working JsFiddle Example.

edited Sep 03 '14 at 17:54

answered Sep 02 '14 at 21:10

Erik Philips

53,428
11
128
150

I tried your code but after selecting a checkbox I am not able to unselect it unless I click on the other one ... I need to be able to unselect a checkbox. – Miguel Moura Sep 02 '14 at 21:44
Sorry, but this is not working ... Now I am able to select many checkboxes on the same group. I created a Fiddle with your code: http://jsfiddle.net/dekfq7zq/ – Miguel Moura Sep 03 '14 at 09:38
You had a lot of problems in your JsFiddle, including not adding jquery to the example :P – Erik Philips Sep 03 '14 at 17:54
I fixed your JsFiddle and added it to my answer. – Erik Philips Sep 03 '14 at 18:21

The Maniac · Answer 2 · 2014-09-03T16:40:30.433

1

You pretty much had it. All you need is to select the right inputs:

groupName = $(this).data('group');
$('input[data-group="' + groupName + '"]').removeAttr('checked');

And here's a fiddle: http://jsfiddle.net/qor1r0a4/

This ended up being a bit more complex than I expected. Turns out jQuery cannot detect if a checkbox is checked if you check it programmatically. You can solve this problem using classes, though, but it isn't as elegant:

$(function() {
    $('input.unique').click(function(e) {

        needsCheck = !$(this).hasClass('checked');

        $('input[data-group="' + $(this).data('group') + '"]')
            .removeAttr('checked')
            .removeClass('checked');

        if (needsCheck) {
            $(this).addClass('checked').prop('checked', true);
        } 
    });
});

edited Sep 03 '14 at 16:40

answered Sep 02 '14 at 21:09

The Maniac

2,628
3
19
29

With your example I am not able to unselect a checkbox and I need to be able to do it ... – Miguel Moura Sep 02 '14 at 21:42
Oops! Yeah, that was just radio functionality heh. It turns out this isn't as straightforward as I thought. Give me a few minutes and I think I can fix it. – The Maniac Sep 02 '14 at 22:14
I've updated the fiddle. I had to use classes to get it to work, so its not 100% perfect imo. – The Maniac Sep 02 '14 at 22:17
Ah man, my changes did not save. JSFiddle was lagging terribly for me so I'm not suprised -- sorry! Here is the new link: http://jsfiddle.net/qor1r0a4/2/ – The Maniac Sep 03 '14 at 16:37

Allow checkbox group to be selected only once or none

2 Answers2