Jquery if checkbox is checked add a class

Question

I am trying to add a class when a checkbox is checked.

My jquery:

$('input').attr("checked").change(function(){
$('div.menuitem').addClass("menuitemshow");
})

betamax · Accepted Answer · 2011-08-01 14:29:52Z

24

You should not use $("input") to select a checkbox, input will select all inputs. Instead you can use input:checkbox:

$('input:checkbox').change(function(){
    if($(this).is(":checked")) {
        $('div.menuitem').addClass("menuitemshow");
    } else {
        $('div.menuitem').removeClass("menuitemshow");
    }
});

Basically what this does is execute whatever is inside the function(){} when the checkbox is changed. Then you can just use jQuery is to check if the checkbox is checked or not..

answered Aug 1, 2011 at 14:29

betamax

14.1k9 gold badges42 silver badges56 bronze badges

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

2 Comments

betamax Over a year ago

Ok, can you post the HTML you are using? It's hard to try and diagnose the problem without seeing that too.

HPWD Over a year ago

If the accepted answer doesn't work for you, give the solution provided by Dinesh Gunarathne a try.

animuson · Accepted Answer · 2011-11-23 04:44:55Z

7

// if checkbox checked then backgorund color will be gray
// there should be a input type check box with a parent class label.

 $('input:checkbox').change(function(){
   if($(this).is(':checked')) 
       $(this).parent().addClass('selected'); 
  else 
      $(this).parent().removeClass('selected')
 });

// input check box should be like this
<label class="" ><input type="checkbox" name="blabla" /></label>

this will add the "selected" class into the label tag()

//css
.selected {
background:gray
}

edited Nov 23, 2011 at 4:44

animuson♦

54.9k28 gold badges142 silver badges150 bronze badges

answered Oct 21, 2011 at 9:41

Dinesh Gunarathne

711 silver badge1 bronze badge

1 Comment

HPWD Over a year ago

This should be marked the correct answer. The accepted answer adds the class to every div.menuitem whereas this one only adds the class to the parent of the item clicked.

Ben Everard · Accepted Answer · 2011-08-01 14:28:26Z

2

Try this:

$('input').change(function(){
    if ($(this).is(':checked')) {
        $('div.menuitem').addClass("menuitemshow");
    }
});

You cannot have a change event on an attribute, instead check the change event of the checkbox itself and run a condition to see if it's been checked.

answered Aug 1, 2011 at 14:28

Ben Everard

13.8k14 gold badges69 silver badges96 bronze badges

4 Comments

heximal Over a year ago

i'd add else block with removeClass

Ben Everard Over a year ago

The OP never specified that in the question, so it's best to just fix the problem they're having, they can modify it when they're ready.

Rails beginner Over a year ago

I did $('div.menuitem').removeClass("menuitem")addClass("menuitemshow"); and the class is removed, but on browser refresh the class menuitem is added again although the checkbox is still checked

Ben Everard Over a year ago

Yes? The changed event fires when you change it, not on load... you could use .trigger() to force the change or handle it correctly server side.

zzzzBov · Accepted Answer · 2011-08-01 14:43:58Z

2

I'm making the assumption you'll want to toggle the class with the checkbox.

$('input').change(function(){
  var $this = $(this), $div = $('div.menuitem');
  if( $this.is(':checked') )
  {
    $div.addClass('show');
  }
  else
  {
    $div.removeClass('show');
  }
}).change();

I've updated this to be a suggested solution @Rails beginner's issue given the comments I've read so far.

Note the addition of change() on the last line. This is to force change to execute immediately on page load (I'm assuming $('input') waits for document.ready or is after the input:checkbox is created).

edited Aug 1, 2011 at 14:43

answered Aug 1, 2011 at 14:29

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

9 Comments

Ben Everard Over a year ago

This isn't right, he doesn't want to add the class to the checkbox, instead to the div.menuitem

Rails beginner Over a year ago

I want to change the class on the div when the checkbox is checked

zzzzBov Over a year ago

@Rails beginner, you want to turn div.menuitem into div.menuitemshow rather than div.menuitem.menuitemshow? I would suggest toggling the class show so that div.menuitem turns into div.menuitem.show it's much more modular that way.

Rails beginner Over a year ago

Yes what about when browser refresh would a checked checkbox still have the class div.menuitem.show ?

zzzzBov Over a year ago

@Rails beginner, every time a browser is refreshed it essentially "forgets" the state of the webpage. There are a few ways of storing persistent client-side data across web requests, but in this case, it's simply a manner of checking the state of the checkbox when the page first loads, which is exactly what the call to change() does.

|

Bertrand Marron · Accepted Answer · 2011-08-01 14:29:38Z

1

$('input:checkbox').change(function () {
    if (this.checked) {
         $('div.menuitem').addClass("menuitemshow");
    }
});

answered Aug 1, 2011 at 14:29

Bertrand Marron

22.3k8 gold badges63 silver badges95 bronze badges

Comments

Amam Dewan · Accepted Answer · 2015-04-26 11:09:10Z

$('.vfb-checkbox input:checkbox').change(function(){
     if($(this).is(":checked")) {
        $('.vfb-checkbox label').addClass("checked");
    } else {
        $('.vfb-checkbox label').removeClass("checked");
    }
});

.vfb-checkbox{
  width:180px;
  height:130px;
 background:url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/2932337756_1845773ed4_q_d_zpsea5idhnt.jpg');
}
/* checkboxes */

.vfb-checkbox label {
		  cursor: pointer;
	    display: block;
	    position: relative;
  width:100%;
  height:100%;

	}

.vfb-checkbox label:hover{
  background:rgba(0,0,0,.7) url(http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png)center center no-repeat;
}

	
.vfb-checkbox input[type=checkbox] {  
    	display: none;
	}
	
.checked{
  	    background: rgba(0,0,0,.4) url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png') center center no-repeat;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vfb-checkbox">
  <label id="checkbox" for="check1">
    <input id="check1" type="checkbox" name="check" value="check1">
  </label>
</div>
<div class="vfb-checkbox">
  <label id="checkbox" for="check1">
    <input id="check1" type="checkbox" name="check" value="check1">
  </label>
</div>

I used jquery in checkbox. When I clicked on one element the other elements are effected. How can I fix this problem?

Tiago Peres · Accepted Answer · 2018-12-28 12:54:42Z

0

$('input:checkbox').change(function(){
    $('div.menuitem').toggleClass('menuitemshow', this.checked);
})

edited Dec 28, 2018 at 12:54

Tiago Peres

15.9k22 gold badges104 silver badges174 bronze badges

answered Dec 27, 2018 at 14:48

Yannick Dirbé

727 bronze badges

Collectives™ on Stack Overflow

Jquery if checkbox is checked add a class

7 Answers 7

2 Comments

1 Comment

4 Comments

9 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

1 Comment

4 Comments

9 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related