JQuery input checkbox set class only if class is missing

Question

I want to set class to Checkbox only if preexising class is missing for the checkbox. Also note it it may contain empty class then also overwrite it with new class. I'm using following but how should I add the condition to the find?

$(this).find("input[type='radio'],input[type='checkbox']").addClass('IE8Border');

I'm trying in this direction:

$(this).find("input[type='radio'],input[type='checkbox']").each(function() {
    $(this)[("[class='']")].addClass('IE8Border');
    $(this)[(":not([class])")].addClass('IE8Border');
});

Chandu · Accepted Answer · 2011-04-04 20:52:08Z

3

You can use hasClass to check if a class was already added.

Try this:

$(this).find("input[type='radio'],input[type='checkbox']").filter(function(){
    return !$(this).hasClass('IE8Border');
}).addClass('IE8Border');

You can also avoid using filter with the following version:

$(this).find("input[type='radio']:not(.IE8Border),input[type='checkbox']:not(.IE8Border)").addClass('IE8Border');

EDIT: If your check is just for existence of a class then try this:

$(this).find("input[type='radio'],input[type='checkbox']").filter(function(){
  var thisClass = $(this).attr("class");
    return !(thisClass && thisClass.length > 0);
}).addClass('IE8Border');

edited Apr 4, 2011 at 20:52

answered Apr 4, 2011 at 20:46

Chandu

83.2k19 gold badges136 silver badges136 bronze badges

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

6 Comments

Marnix Over a year ago

@Cybernate: But what, if you don't know the class and just want to know: if(already has some class)? I think that is the question here.

Chandu Over a year ago

@Marnix: I totally missed that. Updated the post with that option.

Marnix Over a year ago

@Cybernate: You could also do $("input[type='radio'],input[type='checkbox']").not('.IE8Border').addClass('IE8Border');

Marnix Over a year ago

@Cybernate: Nah I'm fine, you were faster. Still, your edit seems to be the best post for as far as the question reaches.

Marnix Over a year ago

@Cybernate: I read even more in the question. He also asks: I want to overwrite the old class.

|

Ender · Accepted Answer · 2011-04-04 21:06:27Z

3

I'm a little unclear on what you're asking, so I have two answers for you:

If you are trying to avoid adding duplicate classes (i.e. adding IE8Border twice), you don't need to filter anything. .addClass() will only add the class if it doesn't already exist on the element.

If you want to add a class to only those elements that don't already have a class, try this:

$(this).find("input[type='radio'],input[type='checkbox']").filter(function() {
   return this.className === '';
}).addClass('IE8Border');

Have a look at this demo to see this working ->

answered Apr 4, 2011 at 21:06

Ender

15.3k8 gold badges38 silver badges51 bronze badges

Comments

Marnix · Accepted Answer · 2011-04-04 21:02:01Z

1

I fully agree on Cybernate's answer. But do you just want to add a class or do you want to overwrite? For the latter one try:

$("input[type='radio'],input[type='checkbox']",this).filter(function(){
    var thisClass = $(this).attr("class");
    return !(thisClass && thisClass.length > 0);
}).removeAttr('class').addClass('IE8Border');

and to extend of Cybernate's answer, instead of filter(), you can also use the not() function.

$("input[type='radio'],input[type='checkbox']").not('.IE8Border').addClass('IE8Border');

answered Apr 4, 2011 at 21:02

Marnix

6,5874 gold badges47 silver badges84 bronze badges

Collectives™ on Stack Overflow

JQuery input checkbox set class only if class is missing

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related