javascript - 这个脚本按我想要的方式工作，但它很难看

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) 则不然立即明确它的作用(如果您的目标是可读性)。另外，您不需要全选更改上的 if/else，因为您总是希望将所有 chk-box 设置为全选的值。

Here's a fiddle I made这样比较干净一点。我只是对所有复选框运行一个循环，看看它们是否都已设置。检查所有处理程序只是将其值应用于所有复选框。全部隐藏只能在这两个事件中处理。

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