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开发者_JAVA百科 maybe there is another way to solve this?

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

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

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.

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.

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

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

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>