Remove class on click and deselect input with JQuery

Question

I have a list item with a radio button input in each, on click of the list item the input is checked. However, if clicked again I want to remove the class and deselect the option. I can't seem to get anything to work however.

function setupToptions() {
    if ($('ul.top-options input').length) {
        $('ul.top-options li').each(function(){ 
            $(this).removeClass('active');
        });
        $('ul.top-options li input:checked').each(function(){ 
            $(this).parent('li').addClass('active');
        });                
    };
};

http://jsfiddle.net/BKgdc/4/

What is wrong?

As @Jack said; no click handler here. And where do you 'deselect' your radio buttons in the above example? I believe you should use selected and remove attribute selected when working with radio buttons. You're now using checked which only applies on checkboxes — Robin van Baalen
– Robin van Baalen, Commented Mar 5, 2013 at 16:42
@RobinvanBaalen - not true, see this fiddle: jsfiddle.net/ZK4th — Mark Schultheiss
– Mark Schultheiss, Commented Mar 5, 2013 at 19:28

Sam · Accepted Answer · 2013-03-05 19:26:54Z

2

  $('ul.top-options li input[type=radio]').click(function() {
     if(!$(this).closest('li').hasClass('active')){
         $('ul.top-options li').removeClass('active');
         $(this).closest('li').addClass('active');
     }else
         $(this).removeAttr('checked').closest('li').removeClass('active');
});

http://jsfiddle.net/BKgdc/8/

edited Mar 5, 2013 at 19:26

answered Mar 5, 2013 at 16:58

Sam

2,9601 gold badge20 silver badges26 bronze badges

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

4 Comments

Mark Schultheiss Over a year ago

$('ul.top-options li').removeClass('active'); is effectively the same as $('ul.top-options li').each(function(){ $(this).removeClass('active'); }); but should be faster

Mark Schultheiss Over a year ago

also, those should really be removeProp not removeAttr - it is changed in 1.9+ and "might" not work in all cases as documented here: jquery.com/upgrade-guide/1.9/#attr-versus-prop-

Sam Over a year ago

I prefer use removeAttr, and removeProp is not recommended for this case, read official documentation note "Note: Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead."

Mark Schultheiss Over a year ago

SO, it almost seems as if you should be setting .prop('checked',false) perhaps rather than removing? interesting to me at least :)

Denys Séguret · Accepted Answer · 2013-03-05 16:42:49Z

1

You need to have an event handler :

$('ul.top-options input').change(function(){
    if ($('ul.top-options input').length) {
        $('ul.top-options li').each(function(){ 
            $(this).removeClass('active');
        });
        $('ul.top-options li input:checked').each(function(){ 
            $(this).parent('li').addClass('active');
        }); 
     }
});

but your code can be simplified as

$('ul.top-options input').change(function(){
     $('ul.top-options li').removeClass('active');
     $('ul.top-options li input:checked').parent('li').addClass('active');
});

See demonstration

edited Mar 5, 2013 at 16:42

answered Mar 5, 2013 at 16:37

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Comments

Mohamed AbdElRazek · Accepted Answer · 2013-03-05 16:45:03Z

0

$(document).ready(function() {

    $li = $('ul.top-options li');
    $li.click(function() {
        if(!$(this).hasClass('active')){
        $li.removeClass('active')
        .filter(this).addClass('active').find('input').prop('checked', true);
        } else {
            $(this).removeClass('active');
            $(this).find('input').prop('checked', false);
        }
    });
    $li.filter(':has(:checked)').click();

});

answered Mar 5, 2013 at 16:45

Mohamed AbdElRazek

1,68414 silver badges18 bronze badges

Comments

Robin van Baalen · Accepted Answer · 2013-03-05 16:46:46Z

0

Your solution would be to use checkboxes instead of radio buttons. No need for any javascript when using checkboxes.

If you want to deselect a radio button you should remove it's selected attribute. :checked only applies on checkboxes.

answered Mar 5, 2013 at 16:46

Robin van Baalen

3,6712 gold badges24 silver badges36 bronze badges

Comments

Mark Schultheiss · Accepted Answer · 2013-03-05 22:16:56Z

You would likely need to do this:

$li = $('ul.top-options li');
$li.click(function () {
    var self = $(this);
    $li.not(self).removeClass('active');
    (self.hasClass('active') ? (self.removeClass('active').find('input').prop('checked', false)) : (self.addClass('active').find('input').prop('checked', true)));
});
$li.filter(':has(:checked)').click();

alternate conditional form:

$li = $('ul.top-options li');
$li.click(function () {
    var self = $(this);
    $li.not(self).removeClass('active');
    if (self.hasClass('active')) {
        self.removeClass('active').find('input').prop('checked', false);
    } else {
        self.addClass('active').find('input').prop('checked', true);
    }
});
$li.filter(':has(:checked)').click();

a fiddle to show in action: http://jsfiddle.net/ZK4th/

Collectives™ on Stack Overflow

Remove class on click and deselect input with JQuery

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related