select only one checkbox and add class for the checked input

Question

I have a list of checkbox and want to select the only one check box and add the class for the checkbox input and select another checkbox remove that class from the existing checkbox

 $('input.myclass').click(function () 
  {
        var id =  $(this).attr('id').replace('image-','');
        $('input.myclass:checked').not(this).removeAttr('checked');

        var sFilter = "";
        $('input.myclass[type=checkbox]').each(function () {
            sFilter = sFilter + (this.checked ? $(this).val() : "");
        });
    check();    
    });

    function check(){
    var a = $('input:checkbox[name=cover_image]:checked').val();
    alert(a);
    }

I want to select only one checkbox and class for the checked checkbox if that checkbox not checked then remove the class for that

Since you only want to select one, wouldn't radio buttons be more appropriate? — j08691
– j08691, Commented Nov 18, 2013 at 4:20
I want to select only one checkbox and class for the checked checkbox if that checkbox not checked then remove the class for that — Aaru
– Aaru, Commented Nov 18, 2013 at 4:24
Users expect certain behaviors for different types of input. You should use radio buttons if you want to only allow one choice. Over-riding the expected and default behavior of checkboxes will only confuse and frustrate your user. — gloomy.penguin
– gloomy.penguin, Commented Nov 18, 2013 at 5:09

tewathia · Accepted Answer · 2013-11-18 05:57:20Z

1

If you really want to use checkboxes(and not radio buttons) for some reason, do something like this:

$('input:checkbox').on('click', function () {
    $('input.selected').removeClass('selected').prop('checked', false);
    $('input:checked').addClass('selected');
});

Edit: Removing the attribute works, but property manipulation is a slighty better way of doing it(as suggested by RobG)

edited Nov 18, 2013 at 5:57

answered Nov 18, 2013 at 5:06

tewathia

7,3383 gold badges26 silver badges28 bronze badges

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

2 Comments

RobG Over a year ago

Adding and removing the checked attribute does not check or uncheck a checkbox, it sets whether or not the checkbox is checked by default (at least it does in versions of jQuery that distinguish between attributes and properties).

tewathia Over a year ago

@RobG I'm using jQuery 1.10.2 with Chrome V32, and it's unchecking the box when I do removeAttr('checked'). It's even checking the box with attr('checked', true). The only odd thing is that it doesn't check the box with that code once you uncheck it using removeAttr

Lalit Kumar Maurya · Accepted Answer · 2013-11-19 12:05:05Z

1

For your purpose first remove classes from all checkbox and unchecked them and then add class to clicked checkbox and checked it as below

$("input[type='checkbox']").on('click', function () {
    $("input[type='checkbox']").removeClass('selected').attr('checked', false);
    $(this).addClass('selected').attr('checked', true);
});

Check this Fiddle for your question

answered Nov 19, 2013 at 12:05

Lalit Kumar Maurya

5,5852 gold badges37 silver badges29 bronze badges

Comments

Andrew Barber · Accepted Answer · 2013-12-26 04:31:28Z

1

you may use on() to listen the changes on group of checkboxes.

var $checkBoxes = $(":checkbox").on("change", function () { // Here listening the changes on checkbox using on()
  $checkBoxes.removeClass("change").attr("checked", false); // remove the class from existing Checkbox
  $(this).addClass("change").attr("checked", true); // adding the class for the currenly checked checkbox
});

working FIDDLE is here

edited Dec 26, 2013 at 4:31

Andrew Barber

40.3k20 gold badges97 silver badges124 bronze badges

answered Nov 18, 2013 at 7:35

Sindhu

4736 silver badges19 bronze badges

Collectives™ on Stack Overflow

select only one checkbox and add class for the checked input

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related