Jquery如果选中复选框添加一个类答案

【问题标题】：Jquery if checkbox is checked add a classJquery如果选中复选框添加一个类
【发布时间】：2018-12-28 20:54:42
【问题描述】：

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

我的 jquery：

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

【问题讨论】：

标签： jquery

【解决方案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 来检查复选框是否被选中..

【讨论】：

好的，您可以发布您正在使用的 HTML 吗？很难在没有看到的情况下尝试诊断问题。
如果接受的答案对您不起作用，请尝试 Dinesh Gunarathne 提供的解决方案。

【解决方案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>

这会将“选定”类添加到标签 tag()中

//css
.selected {
background:gray
}

【讨论】：

这应该被标记为正确答案。接受的答案将类添加到每个 div.menuitem 而这个只将类添加到单击项目的父项。

【解决方案3】：

试试这个：

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

您不能在属性上设置更改事件，而是检查复选框本身的更改事件并运行条件以查看它是否已被检查。

【讨论】：

我会用 removeClass 添加 else 块
OP 从未在问题中指定这一点，因此最好只解决他们遇到的问题，他们可以在准备好时对其进行修改。
我做了 $('div.menuitem').removeClass("menuitem")addClass("menuitemshow");并且该类已被删除，但在浏览器刷新时，尽管复选框仍处于选中状态，但仍会再次添加类菜单项
是吗？ changed 事件在您更改时触发，而不是在加载时触发...您可以使用.trigger() 强制更改或在服务器端正确处理它。

【解决方案4】：

我假设您希望使用复选框来切换课程。

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

鉴于我目前阅读的 cmets，我已将其更新为@Rails 初学者问题的建议解决方案。

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

【讨论】：

这不对，他不想把class加到checkbox里，而是加到div.menuitem
勾选复选框后我想更改div上的类
@Rails 初学者，你想把div.menuitem 变成div.menuitemshow 而不是div.menuitem.menuitemshow？我建议切换show 类，以便div.menuitem 变成div.menuitem.show，这样就更加模块化了。
是的，当浏览器刷新时，选中的复选框仍然具有类 div.menuitem.show 吗？
@Rails 初学者，每次刷新浏览器时，它基本上都会“忘记”网页的状态。有几种方法可以跨 Web 请求存储持久的客户端数据，但在这种情况下，它只是在页面首次加载时检查复选框状态的一种方式，这正是对 change() 的调用所做的。

【解决方案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>

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

【讨论】：

【解决方案7】：

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

【讨论】：