-1

我需要一点帮助：

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");
});

});

当我自动选择第二个 div 时，需要选中复选框，但是那个在 div 里面，而不是上面那个。同样在清除链接上，无法识别 2 div，因此复选框和 div 不会获得 block:none。需要一点帮助，我会很感激！谢谢

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

4

3 回答 3

1

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

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

                });
            });

感谢所有回复。

于 2013-11-07T21:12:44.153 回答
1

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

于 2013-11-04T23:55:58.390 回答
0

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

通过利用thiswhich 跟踪哪个元素被更改，您可以将更改应用于正确的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/

于 2013-11-04T23:56:36.360 回答