jQuery checkbox groups

Question

I have to create some groups for checkboxes. Like when I have 3 checkboxes with 'value="group1"', it only allows me to select one of the checkboxes, every other checkbox under that group gets deselected. I got halfway there, so that I can filter checkboxes based on their groups, and I can set them to false. Problem is with setting the checkbox value for the right checkbox back to "checked". I think I might be using wrong method for this, because it seems that I prevent them from being selected all the time... So maybe there is another way to solve this?

You can see my current JS fiddle here: http://www.jsfiddle.net/Rph8z/

Why don't you use radio buttons? That is what they are for. Use radio buttons if only one item of a group should be selectable and checkboxes for more than one. Here is your updated fiddle: jsfiddle.net/Rph8z/2 (they must have the same name). — Felix Kling
– Felix Kling, Commented Feb 1, 2011 at 13:49
There must be option for not selecting anything, you cant un-select radio button, unless you create a new option that marks as "none", but I don't like that. — WraithLux
– WraithLux, Commented Feb 1, 2011 at 13:52
Why not? If I had to choose between a none value and a solution that basically tries to replicate some already existing behaviour involving JavaScript and won't work if JS is disabled, I would clearly choose none. Besides that, it might be easier to understand for the user if there is (preselected) none option, but that depends on the context. — Felix Kling
– Felix Kling, Commented Feb 1, 2011 at 13:54
And you are confusing the user and reduce usability. If users see checkboxes, they expect to be able to select several options. — Felix Kling
– Felix Kling, Commented Feb 1, 2011 at 13:57

Gergely Fehérvári · Accepted Answer · 2011-02-01 14:06:42Z

5

we use checkboxes because we want to allow users to check more than one answer

if you want to allow only one answer you must use radio buttons. this is the standard.

if you insist to the original way there is the right code:

$(".selector").children("input:checkbox").click(function(e){
var test = $(this).val();
if($(this).attr('checked')==true) {
    $('input[value='+test+']').each(function() {
    $(this).attr('checked',false);
})

    $(this).attr('checked',true)
}
});

at JSFIDDLE

answered Feb 1, 2011 at 14:06

Gergely Fehérvári

7,9816 gold badges52 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jared Farrish Over a year ago

That's way more convoluted than it needs to be. Just use a selector for the value.

WraithLux Over a year ago

Thanks, this did exacly what I asked for. Modified it a bit to use selector, like Jared suggested.

David Thomas · Accepted Answer · 2011-02-01 13:53:06Z

1

As @Felix notes in his comment, you're using the wrong tool for the job. Radio buttons would be much easier, and far more sensible (since you only want one of them to be selected:

<input type="radio" name="radioGroup" value="1" id="radio1" /><label for="radio1">Radio 1</label>
<input type="radio" name="radioGroup" value="2" id="radio2" /><label for="radio2">Radio 2</label>
<input type="radio" name="radioGroup" value="3" id="radio3" /><label for="radio3">Radio 3</label>
<input type="radio" name="radioGroup" value="4" id="radio4" /><label for="radio4">Radio 4</label>

JS Fiddle demo.

answered Feb 1, 2011 at 13:53

David Thomas

254k53 gold badges382 silver badges421 bronze badges

3 Comments

WraithLux Over a year ago

I know about radiobuttons, ofcourse, but my example requires use of checkboxes, I believe that for one group I must be able to select 2 options etc... So checkboxes would be the only way for me...

David Thomas Over a year ago

@WraithLux: just so I'm clear, you have the following requirements: 1: de-selecting must be possible, and 2: selecting more than one option must be possible?

Felix Kling Over a year ago

@WraithLux: Even then you'd have to add some server side validation and make sure that the whole process works without forcing the user to select only 2 options: 1. Because JS can be disabled and 2. because HTTP requests can be faked. Never ever trust user input.

chrislovecnm · Accepted Answer · 2012-09-08 20:05:32Z

1

This is a cleaner version based on previous answers

HTML

<input type="checkbox" class="checkboxgroup" value="1">
<input type="checkbox" class="checkboxgroup" value="2">

JavaScript

$('.checkboxgroup').click(function(e){
  var val = $(this).val();
  $('input[value!='+val+'].checkboxgroup').attr('checked',false);
});

The checkboxes can be anywhere on the page, just give them the class checkboxgroup.

edited Sep 8, 2012 at 20:05

answered Sep 8, 2012 at 19:57

chrislovecnm

2,6213 gold badges22 silver badges38 bronze badges

1 Comment

schwabsauce Over a year ago

With new versions of jQuery use prop() instead of attr() for 'checked' as well as things like 'disabled' etc.

Yoram de Langen · Accepted Answer · 2011-02-01 14:09:31Z

Why not tring this:

// now its only watch to the checkbox where the name IS NOT test
$(".selector input[type=checkbox][name!=test]").click(function(){
    **
    $(this).attr('checked', true);
});

** if you only want that there is ONE selected at all time, add this code BEFORE you set the attribute checked:
$(".selector input[type=checkbox]:checked").removeAttr('checked');


// when you group by you can only use it on the name not the value
<div class="selector">
    <input type=checkbox value="hello" name="test"/>
    <input type=checkbox value="bye" name="test"/>
    <input type=checkbox value="no" name="test2"/>
    <input type=checkbox value="no no" name="test2"/>
</div>

// if you want to use it more but with different value
$(".selector input[type=checkbox]").click(function(){

    var currName = $(this).attr('name');

    //watch if there already is a checkbox checked with the same name
    $(".selector input[type=checkbox][name="+ currName +"]:checked").removeAttr('checked'); // or .attr('checked', false);

    // now set the checkbox you clicked on it to true
    $(this).attr('checked', true);
});

Jared Farrish · Accepted Answer · 2011-02-01 14:16:54Z

0

I would suggest using a class instead of the type.

<div class="selector">
 <input type=checkbox class="serialcheck" name="hello" value="test"/> Hello
 <input type=checkbox class="serialcheck" name="bye" value="test"/> Bye
 <input type=checkbox class="serialcheck" name="no" value="test2"/> No
 <input type=checkbox class="serialcheck" name="no no" value="test2"/> No No
</div>

Really, you just need to select all but the one that is currently firing it's onclick event:

$(".selector input.serialcheck").click(function(){
    var test = $(this).val();
    $(".selector input.serialcheck[value!="+test+"]").attr('checked', false);
});

If you want to select all of the ones with the same value, add one more line:

$(".selector input.serialcheck").click(function(){
    var test = $(this).val();
    $(".selector input.serialcheck[value!="+test+"]").attr('checked', false);
    $(".selector input.serialcheck[value="+test+"]").attr('checked', true);
});

edited Feb 1, 2011 at 14:16

answered Feb 1, 2011 at 14:02

Jared Farrish

49.4k17 gold badges100 silver badges108 bronze badges

1 Comment

Jared Farrish Over a year ago

Depends on if he wants to select by value or simply by the key/value. I added another line to show how to do what you suggest.

Muhammad Russell · Accepted Answer · 2020-06-11 12:26:06Z

0

This works too and its much shorter.

jQuery

var lang = [];

$('.language').on('change', function(){
    lang = [];
    $.each($("input[name='language']:checked"), function(){
        lang.push($(this).val());
    });
});

HTML

<fieldset class="language">
    <label>
        <input type="checkbox" name="language" value="arabic">
        <span>Arabic</span>
    </label>
    <label>
        <input type="checkbox" name="language" value="bangla">
        <span>Bangla</span>
    </label>
    <label>
        <input type="checkbox" name="language" value="english">
        <span>English</span>
    </label>
</fieldset>

answered Jun 11, 2020 at 12:26

Muhammad Russell

4035 silver badges14 bronze badges

Collectives™ on Stack Overflow

jQuery checkbox groups

6 Answers 6

2 Comments

3 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

3 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related