单击时选中的不同复选框-javascript

我不需要什么帮助：

HTML
<div id="toggle">
<ul>
    <li class="active"><input type="checkbox" id="test" value="2014" name="test" checked/> 2014</li>
    <div style="display:block;" id="clear-checked">
        <a href="#">January</a><br />
        <a href="#">January</a><br />
        <a href="#">January</a><br />
        <a href="#">January</a><br />
        <a href="#">January</a>
    </div>
    <div class="clear"></div>
    <li><input type="checkbox" id="test" value="2013"  name="test" /> 2013</li>
    <div id="clear-checked">
        <a href="#">January</a><br />
        <a href="#">January</a><br />
        <a href="#">January</a><br />
        <a href="#">January</a><br />
        <a href="#">January</a>
    </div>

</ul>

}))

当我选择secont div AUTOMATICL时，我需要选中复选框，但该复选框位于div内部，而不是上部。同样在清除链接上，2 div无法识别，因此复选框和div dont get block:none。需要一点帮助，我会非常感激的！谢谢

---

现场演示：

我对这类东西也不熟悉，但我最初的猜测是，在两个不同的复选框上需要不同的id

我将您的

id=“mycheckboxdiv”

和

id=“mycheckbox”

改为类。我通常只对我知道的唯一元素使用

ID

，在某些情况下，重复的

ID

可能会导致问题

通过利用

此

跟踪更改的元素，您可以将更改应用到正确的

mycheckboxdiv

，只需一个函数即可完成

$(document).ready(function() {
    $('.mycheckbox').change(function() {
        $(this).parent().next('.mycheckboxdiv').slideToggle(500);
        $(this).parent().find('.disabled').removeClass().addClass('enabled');
    });
});

范例

---

这正是我需要的，一个朋友帮了我

$(document).ready(function() {
                $('input[type=checkbox]:not("li")').click(function(e) {
                    if ($(this).is(':checked')) {
                        $(this).prop('checked', false);
                    } else {
                        $(this).prop('checked', true);
                    }
                });

                $("li:not('input[type=checkbox]')").click(function(){
                    $(this).toggleClass("active");
                    $(this).next("div").stop('true','true').slideToggle("slow");
                    if ($(this).find('input[type=checkbox]').is(':checked')) {
                        $(this).find('input[type=checkbox]').prop('checked', false);
                    } else {
                        $(this).find('input[type=checkbox]').prop('checked', true);
                    }
                });
            });

            $(document).ready(function() {
                $('#check-all').click(function(){
                    $("input:checkbox").attr('checked', true);
                });

                $('#uncheck-all').click(function(){
                    $('.clear-checked').attr("style", "display:none;");
                    $('li').each(function(i, obj) {
                        $(obj).removeClass("active");
                        $(obj).find('input[type=checkbox]').prop('checked', false);
                    });

                });
            });

---

感谢所有的响应。

如果他为复选框和div提供了不同的ID，然后为每个复选框创建了两个更改函数，然后针对相应的

。从那里禁用了
元素，那么这将起作用。然而，它可以在更少的代码中使用类。这不是正确的解决方案atm，因为对于这一部分，将是PHP，所有的“框”需要是相同的html：对于类来说，这很好，但是我如何才能添加/删除/打开/关闭复选框？感谢您的回复。@user2409020抱歉，我不太清楚我是否理解，您是否查看了
小提琴示例
？选中复选框后，如果未选中该复选框，是否希望该类返回到禁用状态？@user2409020如果答案回答了您的问题，请将其标记为已接受，否则请对未解决的问题给出反馈。谢谢你的回复，我把我需要的答案放在下面。谢谢你，我很高兴你的工作。我的小提琴一直是错的，我想我不小心忘了更新它。应该是
$(document).ready(function() {
                $('input[type=checkbox]:not("li")').click(function(e) {
                    if ($(this).is(':checked')) {
                        $(this).prop('checked', false);
                    } else {
                        $(this).prop('checked', true);
                    }
                });

                $("li:not('input[type=checkbox]')").click(function(){
                    $(this).toggleClass("active");
                    $(this).next("div").stop('true','true').slideToggle("slow");
                    if ($(this).find('input[type=checkbox]').is(':checked')) {
                        $(this).find('input[type=checkbox]').prop('checked', false);
                    } else {
                        $(this).find('input[type=checkbox]').prop('checked', true);
                    }
                });
            });

            $(document).ready(function() {
                $('#check-all').click(function(){
                    $("input:checkbox").attr('checked', true);
                });

                $('#uncheck-all').click(function(){
                    $('.clear-checked').attr("style", "display:none;");
                    $('li').each(function(i, obj) {
                        $(obj).removeClass("active");
                        $(obj).find('input[type=checkbox]').prop('checked', false);
                    });

                });
            });