Jquery if checkbox is checked add a class

问题

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

My jquery:

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

回答1:

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..

回答2:

// 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
}

回答3:

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.

回答4:

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).

回答5:

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

回答6:

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

回答7:

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

来源：https://stackoverflow.com/questions/6899859/jquery-if-checkbox-is-checked-add-a-class

标签

jquery