Question

我有一个我努力工作的剧本，但它很丑陋但是有效。它可以检查所有复选框（使用.select-all），如果未选中其中一个复选框（.chk-box），.select-all也将取消选中。此外，.select-all还会隐藏div（.hidethis）。我处于学习状态，所以如果有人（如果简单）可以向我展示具有此功能的更好的代码，那么非常受欢迎！它可以让我学到很多东西！

<script type="text/javascript">

        $("document").ready(function()
        {
            if($(".select-all").is(":checked"))    
            {               
                $(".hidethis").hide();
            }
            else
            {
                $(".hidethis").show();
            }
        });

        $(".select-all").change(function () 
        {
            if (this.checked)   
            {               
                $(".chk-box").prop('checked', $(this).prop("checked"));
                $(".hidethis").hide();
            }
            else
            {
                $(".chk-box").removeAttr("checked");
                $(".hidethis").show();
            }   
        });

        $(".chk-box").change(function ()
        {
            if($(".chk-box").length == $(".chk-box:checked").length) 
            {
                $(".select-all").prop('checked', $(this).prop("checked"));
                $(".hidethis").hide();
            } 
            else 
            {
                $(".select-all").removeAttr("checked");
                $(".hidethis").show();
            }
        });

</script>

Answer 1

您的代码并不丑陋 - 但if($(".select-all").length == $(".select-all:checked").length)并未立即明确它的作用（如果您的目标是可读性）。此外，您不需要select-all更改上的if / else，因为您总是希望将所有chk-box设置为select-all的任何值。

Here's a fiddle I made有点干净了。我只是在所有复选框上运行一个循环，看看它们是否全部设置。 check all处理程序只将其值应用于所有复选框。可以在这两个事件中处理全部隐藏。

JS：

$(".check").on("change", function() {
    var allChecked = true;
    $(".check").each(function(i) {
        allChecked = allChecked && $(this).prop("checked");
    });
    $(".check-all").prop("checked", allChecked);

    allChecked ? $(".hidethis").hide() : $(".hidethis").show();
});

$(".check-all").on("change", function() {
    var checked = $(this).prop("checked");
    $(".check").prop("checked", checked);

    checked ? $(".hidethis").hide() : $(".hidethis").show();
});

这个脚本按我的意愿工作，但它的丑陋

1 个答案: