CODEWITHSUNDEEP
jquerycheckbox
WraithLux
WraithLux

Reputation: 699

jQuery checkbox groups

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/

Upvotes: 1

Views: 17641

Answers (6)

Muhammad Russell
Muhammad Russell

Reputation: 393

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>

Upvotes: 0

chrislovecnm
chrislovecnm

Reputation: 2611

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.

Upvotes: 1

Jared Farrish
Jared Farrish

Reputation: 49198

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);
});

Upvotes: 0

Yoram de Langen
Yoram de Langen

Reputation: 5499

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);
});

Upvotes: 0

Gergely Feh&#233;rv&#225;ri
Gergely Feh&#233;rv&#225;ri

Reputation: 7941

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

Upvotes: 5

David Thomas
David Thomas

Reputation: 253318

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.

Upvotes: 1

Related Questions