jQuery如果复选框被选中则添加一个类。

Question

我想在复选框选中时添加一个类。

我的 jQuery 代码：

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

- Rails beginner

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 来检查复选框是否被选中。

- betamax

---

好的，你能发一下你正在使用的HTML吗？如果没有看到它，很难诊断问题。 - betamax

如果被接受的答案对你无效，可以尝试一下Dinesh Gunarathne提供的解决方案。 - HPWD

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"类。

//css
.selected {
background:gray
}

- Dinesh Gunarathne

---

这应该被标记为正确答案。被接受的答案将类添加到每个div.menuitem，而这个答案只将类添加到所点击项的父级。 - HPWD

Answer 3

试试这个：

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

您不能在属性上使用更改事件，而是要检查复选框本身的更改事件，并运行条件以查看是否已选中。

- Ben Everard

---

我会添加一个else块，并使用removeClass函数。 - heximal

OP在问题中没有指定，所以最好只是解决他们遇到的问题，等他们准备好了再修改它。 - Ben Everard

我执行了$('div.menuitem').removeClass("menuitem")addClass("menuitemshow");，类被移除了，但是在浏览器刷新后，类menuitem又被添加了，尽管复选框仍然被选中。 - Rails beginner

是的？当您更改它时，更改事件会触发，而不是在加载时...您可以使用.trigger()来强制更改或在服务器端正确处理它。 - Ben Everard

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创建后执行）。

- zzzzBov

---

这不对，他不想将类添加到复选框，而是要添加到 div.menuitem。 - Ben Everard

当复选框被选中时，我想要改变 div 上的类。 - Rails beginner

当复选框被更改时，页面将重新加载。 - Rails beginner

@Rails初学者，“等等，什么？”你应该把这个重要的信息添加到你的问题中。页面重新加载有没有什么原因？我猜你正在运行一些其他的脚本。如果涉及到服务器端语言，那么你应该在服务器上设置复选框的状态。 - zzzzBov

是的，有一个脚本会在复选框更改时提交表单，因此会进行页面刷新。 - Rails beginner

Answer 5

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

- Bertrand Marron

Answer 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。当我点击一个元素时，其他元素也会受到影响。我该如何解决这个问题？

- Amam Dewan

Answer 7

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

- Yannick Dirbé