Question

如果选中了复选框，我想在我的复选框标签中添加一个类。

继承我的HTML

<ul class="checkbox-list">
    <li><label class="rounded-all">Google <input class="checkbox-row" name="google" type="checkbox" value=""></label></li>
    <li><label class="rounded-all">Bing <input class="checkbox-row" name="bing" type="checkbox" value=""></label></li>
    <li><label class="rounded-all">Facebook <input class="checkbox-row" name="facebook" type="checkbox" value=""></label> </li> 
</ul>

我尝试使用这段代码，但我似乎没有做到这一点：

$(".checkbox-row").change(function() {
    $(this).closest('.checkbox-list li label').toggleClass("selected", this.checked);
});

Answer 1

你有什么作品，you can test it here。可能发生的事情是你的.selected类的CSS选择器不够具体，因此属性没有得到应用。

例如，这可能不起作用（如果说有另一种颜色定义的.checkbox-list li label样式）：

.selected { color: red; }

虽然更具体的选择器会：

.checkbox-list li label.selected { color: red; }

这是值得的，但label只需使用$(".checkbox-row").change(function() { $(this).closest('label').toggleClass("selected", this.checked); });即可简化.closest()来电：

{{1}}

Answer 2

试试这个：

$(".checkbox-row").change(function() {
    if($(this).is(':checked')) 
        $(this).parent().addClass('selected'); 
    else 
        $(this).parent().removeClass('selected');
});

选中复选框添加类

2 个答案: