Question

我正在尝试将一个类应用于li元素，如果选中了输入框，但我无法弄清楚为什么它没有发生。 HTML和CSS是'由他人'，所以我确信那里只有jQuery有错误。

HTML

<ol class="subproduct">
<li>
    <input type="checkbox" name="extra2" value="tested" />
    <p class="checkbox"></p>
    <h3>test <span class="price">5</h3>
    <p>word words words</p>
</li>
<li>
    <input type="checkbox" name="extra2" value="tested" />
    <p class="checkbox"></p>
    <h3>test <span class="price">5</h3>
    <p>word words words</p>
</li>
<li>
    <input type="checkbox" name="extra2" value="tested" />
    <p class="checkbox"></p>
    <h3>test <span class="price">5</h3>
    <p>word words words</p>
</li>
<li>
    <input type="checkbox" name="extra2" value="tested" />
    <p class="checkbox"></p>
    <h3>test <span class="price">5</h3>
    <p>word words words</p>
</li>

这个Jquery是

$(document).ready(function() {
    $('input:checkbox').change(function(){
         if($(this).is(":checked")) {
             $('.subproduct li').addClass("checked");
         } else {
             $('.subproduct li').removeClass("checked");
         }
    });
});

我创建了一个包含所有CSS和HTML的小JSFiddle - http://jsfiddle.net/sturobson/gG8Qr/

我确定有一些过于特殊的东西？基本上，如果选中该复选框，我想在.subproduct li

中添加/删除一个类

但目前的代码无效。有什么想法吗？

Answer 1

您正在检查检查bocx是否已检查...然后如果选中，则您要向所有<li>添加课程..使用parent()来获取特定{{1} }和..use添加或删除类.. 使用parent（）;

<li>

fiddle here

Answer 2

您始终将班级分配给所有li元素。尝试仅使用jQuery parent()将其分配给直接育儿li，类似于：

$(document).ready(function() {
    $('input:checkbox').change(function(){
        if($(this).is(":checked")) {
            $(this).parent("li").addClass("checked");
        } else {
            $(this).parent("li").removeClass("checked");
        }
    });
});

或者如果您希望始终将该课程分配给父级，而不管它是li，您只能使用parent()类似于以下内容：

$(document).ready(function() {
    $('input:checkbox').change(function(){
        if($(this).is(":checked")) {
            $(this).parent().addClass("checked");
        } else {
            $(this).parent().removeClass("checked");
        }
    });
});

DEMO - 仅将班级分配给家长li

Answer 3

你必须沿着DOM而不是选择所有.subproduct li元素。为此使用jQuery parent，next或prev函数。在您的示例中：

$(document).ready(function() {
    $('input:checkbox').change(function(){
         if($(this).is(":checked")) {
             $(this).parent().addClass("checked");
         } else {
             $(this).parent().removeClass("checked");
         }
    });
});

单击复选框并将类应用于其父级

3 个答案: