Geek Answers Handbook

JQuery, if checked, adds a class

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

My jquery:

$('input').attr("checked").change(function(){ $('div.menuitem').addClass("menuitemshow"); })
+8
jquery
source share
6 answers

You should not use $("input") to select the checkbox , the input will select all the 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 it does is doing everything that is inside function(){} when the checkbox changes. Then you can simply use jQuery is to check if the checkbox is checked or not.

+13
source share
 // 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 to the tag tag ()

 //css .selected { background:gray }
+3
source share

Try the following:

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

You cannot have a change event for an attribute, instead check the change event of the flag itself and run the condition to check if it is checked.

+2
source share

I make the assumption that you want to switch the class using the checkbox.

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

I updated this to offer a solution to the @Rails release issue, given the comments I have read so far.

Note the addition of change() to the last line. This will force change to execute immediately when the page loads (I assume $('input') waiting for document.ready or after creating input:checkbox ).

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

 $('.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 the checkbox. When I clicked on one item, the other items are executed. How can I fix this problem?

0
source share

More articles:


All Articles