0

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

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

我正在寻求一些 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/

4

2 回答 2

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

小提琴

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

.select-area.box-checked {
    background: red;
}
于 2012-12-06T17:52:39.553 回答
1

试试下面的代码

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

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

CSS 需要 !important 在小提琴中，因为选择区域应用“黑色”背景优先

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

于 2012-12-06T18:00:41.663 回答