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");
})

score 24 · Accepted Answer · answered Aug 01 '11 at 14:29

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 01 '11 at 14:29

betamax

13,431
9
38
55

Ok, can you post the HTML you are using? It's hard to try and diagnose the problem without seeing that too. – betamax Aug 01 '11 at 14:39
If the accepted answer doesn't work for you, give the solution provided by Dinesh Gunarathne a try. – HPWD May 12 '17 at 13:53

score 7 · Answer 2 · edited Nov 23 '11 at 04:44

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 '11 at 04:44

animuson

53,861
28
137
147

answered Oct 21 '11 at 09:41

Dinesh Gunarathne

71
1
1

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. – HPWD May 11 '17 at 20:06

score 2 · Answer 3 · answered Aug 01 '11 at 14:28

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 01 '11 at 14:28

Ben Everard

13,652
14
67
96

i'd add else block with removeClass – heximal Aug 01 '11 at 14:29
1

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. – Ben Everard Aug 01 '11 at 14:30
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 – Rails beginner Aug 01 '11 at 14:32
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. – Ben Everard Aug 01 '11 at 14:35

zzzzBov · Answer 4 · 2011-08-01T14:43:58.850

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 01 '11 at 14:43

answered Aug 01 '11 at 14:29

zzzzBov

174,988
54
320
367

This isn't right, he doesn't want to add the class to the checkbox, instead to the `div.menuitem` – Ben Everard Aug 01 '11 at 14:29
I want to change the class on the div when the checkbox is checked – Rails beginner Aug 01 '11 at 14:40
@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. – zzzzBov Aug 01 '11 at 14:42
Yes what about when browser refresh would a checked checkbox still have the class div.menuitem.show ? – Rails beginner Aug 01 '11 at 15:04
@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. – zzzzBov Aug 01 '11 at 16:02
When the checkbox is changed the page reloads – Rails beginner Aug 01 '11 at 16:04
@Rails beginner, *wait what?* You should add that to your question as it's an important piece of information. Is there a *reason* that the page reloads? I assume you're running some other script. If there's a server side language involved, then you ought to be setting the checkbox's state on the server. – zzzzBov Aug 01 '11 at 16:10
Yes there is a script that submits the form when checkbox is changed, therefor there is a page refresh. – Rails beginner Aug 01 '11 at 16:12
Is it not possiable to make an ajax request when the form is submitted and the content the only content that is refreshed is the content in the div with the id of rightcontent? – Rails beginner Aug 01 '11 at 16:38

score 1 · Answer 5 · answered Aug 01 '11 at 14:29

1

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

answered Aug 01 '11 at 14:29

Bertrand Marron

21,501
8
58
94

score 0 · Answer 6 · answered Apr 26 '15 at 11:09

$('.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?

score 0 · Answer 7 · edited Dec 28 '18 at 12:54

0

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

edited Dec 28 '18 at 12:54

Tiago Martins Peres

14,289
18
86
145

answered Dec 27 '18 at 14:48

Yannick Dirbé

60
7

Jquery if checkbox is checked add a class

7 Answers7

Linked