Question

我正在尝试在选中复选框时添加一个类。

我的jquery：

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

Answer 1

您不应使用$("input")选择checkbox，输入将选择所有输入。相反，您可以使用input:checkbox：

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

基本上这样做是在复选框被更改时执行function(){}内的任何内容。然后你可以使用jQuery is来检查复选框是否被选中..

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

这会将“selected”类添加到label tag（）

中

//css
.selected {
background:gray
}

Answer 3

试试这个：

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

您不能对属性进行更改事件，而是检查复选框本身的更改事件并运行条件以查看是否已检查。

Answer 4

我假设您要使用复选框切换课程。

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

鉴于我到目前为止所阅读的评论，我已将此更新为建议的解决方案@Rails初学者的问题。

请注意在最后一行添加change()。这是为了强制change在页面加载时立即执行（我假设$('input')等待document.ready或创建input:checkbox之后）。

Answer 5

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

Answer 6

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我在复选框中使用了jquery。当我点击一个元素时，其他元素就会受到影响。我该如何解决这个问题？

Answer 7

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

如果选中复选框，则Jquery添加一个类

7 个答案: