Checkbox behaviour modification with javascript

Question

I have got this group of checkboxes that behave like radio buttons.

I need some help in letting the user allow to uncheck a checkbox too, so there can be no selection within the group.

<label><input type="checkbox" name="cb1" class="chb" /> CheckBox1</label>
<label><input type="checkbox" name="cb2" class="chb" /> CheckBox2</label>
<label><input type="checkbox" name="cb3" class="chb" /> CheckBox3</label>
<label><input type="checkbox" name="cb4" class="chb" /> CheckBox4</label>


$(".chb").each(function()
           {
               $(this).change(function()
                              {
                                  $(".chb").attr('checked',false);
                                  $(this).attr('checked',true);
                              });
           });

I don't understand what are you trying to achieve. if you are allowing only one option, have you consider using a drop down list instead? — Gapton
– Gapton, Commented Sep 26, 2011 at 3:47

Joseph Silber · Accepted Answer · 2011-09-26 03:44:28Z

3

$(".chb").change(function()
{
    $(".chb").parent().siblings()
        .find('input').prop('checked', false);
});

Or even better:

var $inputs = $(".chb");

$inputs.change(function()
{
    $inputs.not(this).prop('checked', false);
});

And here's the fiddle: http://jsfiddle.net/zjJKc/

answered Sep 26, 2011 at 3:44

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

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

5 Comments

Joseph Silber Over a year ago

@Christian - What do you mean by "radio button behavior"? I thought you meant that only one of them can be checked, so that when you check one of them, all the others get unchecked. This is how my code works. If that's not what you meant, please explain what you mean by "radio button behavior".

Christian Over a year ago

the fiddle works. It does not work with my mark up because the checkboxes are in seperate html elements and not in one single group. when I implement it fiebug tells me "$inputs.not(this).prop('checked', false); " is not a function

Joseph Silber Over a year ago

@Christian - Which version of jQuery are you using? .prop was introduced in version 1.6, so if you're using anything below that, use .attr.

Joseph Silber Over a year ago

@Christian - Since you haven't provided your full markup, there's no way for me to guide you on how to select all those checkboxes together into the $inputs variable...

Christian Over a year ago

thanks I was using 1.4. I upgraded to 1.6 and that fixed it. thanks for the valuable info and snippet ;-)

Collectives™ on Stack Overflow

Checkbox behaviour modification with javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related