Question

我不确定我的问题标题是否是最佳描述。

我正在寻求一些jquery帮助，请检查是否选中了input =“checkbox”，然后根据复选框状态添加一个类或删除。

无论如何，我的表单标记看起来像这样......

<form>

    <ul class="select-wrapper">

        <li class="select-area">

            <input type="checkbox" name="colour1" id="colour1" value="black">

            <label for="colour1">Number 1</label>

        </li>

    </ul>

</form>

看到这个非常糟糕的尝试。 http://jsfiddle.net/2Wpfw/3/

正如您可以看到，当您将鼠标悬停在<li>上时，它们变为红色，但如果已经检查了输入或者是否实时选择了输入，则不要保持红色。

我希望它们在页面上实时选择输入时保持红色，如果未选中则返回黑色。该表单是基于ajax的，所以如果有错误，我希望检查的输入li以红色显示（我将通过在提交表单后再次运行该函数来执行此操作）。

我正在以红色显示我添加并删除.box-checked类。

任何人都可以看到可能的工作，因为我很遗憾在哪里开始。

非常感谢任何帮助。感谢

http://jsfiddle.net/2Wpfw/3/

Answer 1

$(".select-area input[type='checkbox']").on('change', function() {
    $(this).closest('.select-area').toggleClass('box-checked', this.checked);
});

FIDDLE

您还需要在CSS中更具体，因为现在.box-checked样式没有覆盖原始样式，例如：

.select-area.box-checked {
    background: red;
}

Answer 2

尝试以下代码

$inputCB.bind('change', function (){

$(this).parent().toggleClass('box-checked',this.checked);
});

CSS需要！因为选择区域应用优先级为“黑色”的背景，所以小提琴非常重要

http://jsfiddle.net/2Wpfw/13/

检查或未选中输入复选框时，jquery检查并更改父节点背景颜色

2 个答案: