Jquery 如果复选框被选中添加一个类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6899859/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery if checkbox is checked add a class
提问by Rails beginner
I am trying to add a class when a checkbox is checked.
当复选框被选中时，我试图添加一个类。
My jquery:
我的jQuery：
$('input').attr("checked").change(function(){
$('div.menuitem').addClass("menuitemshow");
})
回答by betamax
You should not use $("input")to select a checkbox, input will select all inputs. Instead you can use input:checkbox:
您不应该使用$("input")选择 a checkbox，输入将选择所有输入。相反，您可以使用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 isto check if the checkbox is checked or not..
基本上，它的作用是function(){}在复选框更改时执行里面的任何内容。然后你可以使用jQueryis来检查复选框是否被选中。
回答by Dinesh Gunarathne
// 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()
这会将“选定”类添加到标签 tag()
//css
.selected {
background:gray
}
回答by Ben Everard
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.
您不能在属性上设置更改事件，而是检查复选框本身的更改事件并运行条件以查看它是否已被选中。
回答by zzzzBov
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 suggestedsolution @Rails beginner's issue given the comments I've read so far.
鉴于我目前阅读的评论，我已将此更新为建议的解决方案@Rails 初学者问题。
Note the addition of change()on the last line. This is to force changeto execute immediately on page load (I'm assuming $('input')waits for document.readyor is afterthe input:checkboxis created).
注意change()最后一行的添加。这是迫使change在网页加载立即执行（我假设$('input')等待document.ready或者是之后的input:checkbox创建）。
回答by Bertrand Marron
$('input:checkbox').change(function () {
if (this.checked) {
$('div.menuitem').addClass("menuitemshow");
}
});
回答by Amam Dewan
$('.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?
我在复选框中使用了 jquery。当我点击一个元素时，其他元素会受到影响。我该如何解决这个问题？
回答by Yannick Dirbé
$('input:checkbox').change(function(){
$('div.menuitem').toggleClass('menuitemshow', this.checked);
})
