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/

--------------Solutions-------------

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

Category:jquery Time:2011-02-01 Views:1

Related post

  • JQuery Checkboxes Group check 2009-12-14

    All, I have the following code. How can I fix it so that the category checkbox for each category is checked only if all the items under that are checked? Thanks <html> <head> <script src="http://www.google.com/jsapi"></script>

  • jQuery Validation plugin: checkbox groups and error message issues 2010-02-24

    I've put together a form using the jQuery Validation plugin, and all inputs are fine with working validation and error messages – except for checkboxes. I have two checkbox problems. The first is that the Validation plugin API doesn't seem to handle

  • Using jQuery to list all checked values of a checkbox group. Works in FF and Chrome NOT in IE 2010-11-11

    This code works like a champ in FF and Chrome to return a comma delimited list of checked values: $('#lifesteps-group-0 :checked').each(function() { if (allSteps.length === 0) { allSteps = $(this).val(); } else { allSteps = allSteps + ',' + $(this).v

  • jQuery validation on a checkbox group using class 2011-03-23

    My question is very similar to jQuery Validation using the class instead of the name value1. I want to validate a checkbox group, such that at least one needs to be checked. By default, both checkboxes are checked, but I want to ensure the user doesn

  • JQuery Multiple Checkbox Groups Validation 2011-12-23

    How can I validate Checkbox groups with JQuery? I need to make sure that in each group at least one checkbox is selected. I'd like to use a class to identify the groups, so, the html would look like this: <!-- checkbox group --> <fieldset cl

  • JQuery Validating Multiple Checkbox Groups 2011-12-24

    I have the following two checkbox groups: <fieldset class="CbxGroup"> <legend>Checkbox Group (required)</legend> <label><input type="checkbox" name="cbxGroup1[]" value="one" id="cbxGroup1_0">One </label> <br>

  • How to find out checkbox group in Jquery 2012-02-15

    My HTML form contains many checkbox groups,I want to check if atleast one checkbox is selected from every group. For example // Group vehicle <input type="checkbox" name="vehicle" value="Bike"/> I have a bike<br /> <input type="checkbo

  • jQuery - checkboxes like radiobuttons 2009-05-19

    I have group checkboxes and I like if this group have behaviour like radiobuttons with same name atribute. Each checkbox has different name. Only one can be chosen from checkboxes. How I can do this? Solution Why I need this? Because we need consiste

  • PHP - Checkbox group 2009-12-11

    I have a checkbox group in one form that I need to be posted. <input type="checkbox" value="true" checked name="chk0[]"> <input type="checkbox" value="false" name="chk0[]"> <input type="checkbox" value="false" name="chk0[]"> <inp

  • jQuery checkbox validation issue 2011-11-20

    Using this jQuery validation plugin. http://www.benjaminkeen.com/software/rsv/jquery/index.php I want to validate a checkbox group with JS, but when i use the statement: rules.push("required,accomodationtype[],Please check all that apply"); or rules.

  • Use both jQuery.checkbox & jQuery.field 2009-07-27

    thank you for your time. I am trying to use 2 Jquery solutions on the one form, but I am unable to get the desired result after working on it for several hours. The first jquery solution enables a better look and feel http://www.envirotalk.com.au/jqu

  • JQuery Checkbox Treeview 2009-10-08

    I am looking for a JQuery Checkbox Treeview. Does anyone know if a good one exists? --------------Solutions------------- The best treeview I've found for jQuery so far is Dynatree. Very comprehensive, and with great documentation. Dynatree is now hos

  • jQuery checkbox drop down control 2010-02-07

    hi, i am using jQuery checkbox drop down control. i am able to bind the values to listbox and show the values . i need to make certain items in my listbox[checkbox drop down control] non selectable. i am refering this website http://dropdown-check-li

  • Checkbox groups in asp 2010-02-11

    I ran into a strange problem with checkbox groups. I am trying to get the values from a group of checkboxes, but I have to hit the submit button twice for it to get the values... I have no idea why. I also use a dropdown box on the same form and I on

  • Jquery validation groups 2010-09-08

    I can't figure out how jquery validation groups work, nor how they should work. I assumed it would serve as to validate conditions that needed more than one element to be tested, is that it? Couldn't find anything about it on the jquery validation do

  • Select all on dojo checkbox group 2011-01-26

    I currently have a dojo checkbox group (dijit.form.CheckBox with names in the form "some_name[]") It works exactly as desired however I need to add a select all button/link, preferably not another checkbox (this shouldn't be necessary given the funct

  • If checkbox group isn't ticked error is returned 2011-03-04

    I have a checkbox group which works fine when you tick one but it returns an error if all are left unticked. Here's the code: foreach ($_SESSION['CheckboxGroup1'] as $val) { $checkbox1results .= $val.",\n"; } This is the error I'm getting back: Warni

  • how to echo checkbox group? 2011-07-18

    Can somebody help me? i cant echo my checkbox group with a multiple selection. Every time i echo the checkbox group the only things show is the last box that Ive check. here's my code <?php $submit = $_POST['submit']; $incharge = $_POST['incharge'

  • checkbox group decorator using zend 2011-07-26

    I wnat to display checkbox group using zend form multicheckbox but not getting the use of decorators. i am bringing the array list from the database in an key value pair array.. <td><table width="100%" cellspacing="0" cellpadding="0" border=

Copyright (C) pcaskme.com, All Rights Reserved.

processed in 0.430 (s). 13 q(s)