使用jquery在check操作上切换复选框的父类

Question

我正在尝试制作一个包含多个复选框的表单。我想突出显示其内容的复选框，以向用户指示选择
我正在为表单使用以下布局

HTML

<form>
<div class=labl>
<input type=checkbox id='alpha' />
<label for='alpha'>Checkbox1</label>
</div>

CSS

.labl{

height:50px;
}
.labl:hover{
background:#ccc;
}
.chked {
background: #4285f4;
height:50px;
}

的jQuery

<script>

$("input[type=checkbox]").change(function() {
    $(this).parent().toggleClass("chked");
});

</script>

现在当检查alpha时，它应该将div的类从labl更改为chked，但它不是

Answer 1

你需要像这样$(function(){...});

的DOM就绪处理程序

$(function () {
    $("input[type=checkbox]").change(function () {
        $(this).parent().toggleClass("chked");
    });
});

Documentation

<强>更新

似乎复选框已动态添加到DOM中，因此您必须使用此类

之类的事件委派

    $(document).on("change","input[type=checkbox]",function () {
        $(this).parent().toggleClass("chked");
    });

Answer 2

您可以将两个类名传递给toggleClass()方法，以便一次只应用其中一个

jQuery(function(){
    $("input[type=checkbox]").change(function() {
        $(this).parent().toggleClass("labl chked");
    });
})

演示：Fiddle

Answer 3

只需将脚本更改为

即可

$("input[type=checkbox]").change(function() {
    $(this).parents('.labl').toggleClass("chked");
}); 

你的HTML

<form>
<div class='labl'>
    <input type='checkbox' id='alpha'></input>
<label for='alpha'>Checkbox1</label>
</div>

这是更新的小提琴

http://jsfiddle.net/k242J/

Answer 4

toggleClass功能是检查类，如果没有它会添加，否则删除它就是这样的类。它不会从一个班级改为另一个班级。

<强> CSS

.chked {
    background: #4285f4;
}

<强> JS

$("input[type=checkbox]").change(function() {
     $(this).parent().toggleClass("chked");
 });