Question

我对此一点帮助：

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>

清除

JS：

$(document).ready(function() {
    $("li").click(function(){
        $(this).toggleClass("active");
        $(this).next("div").stop('true','true').slideToggle("slow");

         if( $('li').hasClass('active') ) {
             $("#test:checkbox").prop('checked', true);

         } 
         else {

            $("#test:checkbox").prop('checked', false);
        }
    });

 $('#check-all').click(function(){
    $("input:checkbox").attr('checked', true);
});
$('#uncheck-all').click(function(){
$("#test:checkbox").attr('checked', false);
$('#clear-checked').attr("style","display:none;");
$("li").removeClass("active");
});

}）;

当我自动选择secont div时需要选中复选框，但是那个是在div里面，而不是上面的div。同样在清除链接上，2 div不被识别，因此复选框和div不得阻止：无。需要一点帮助，我会app很多！感谢

现场演示：http://fiddle.jshell.net/HsYrD/2/

Answer 1

我也是这类新手，但我最初的猜测是你需要在两个不同的复选框上使用不同的ID

Answer 2

这就是我需要的，一位朋友帮助了我。

$(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);
                    });

                });
            });

感谢所有回应。

Answer 3

我将您的id="mycheckboxdiv"和id="mycheckbox"更改为了课程。我通常只使用ID's表示我知道的独特元素，在某些情况下，重复ID会导致问题。

通过利用跟踪哪个元素已更改的this，您可以将更改应用于正确的mycheckboxdiv，并且可以使用一个函数完成。

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

实施例

http://fiddle.jshell.net/krF28/1/

点击选择不同的复选框 - javascript

3 个答案: