Dieses Skript funktioniert, wie ich will, aber seine hässliche

Question

Ich habe ein Skript, das ich hart arbeitete, aber es ist ziemlich hässlich, aber es funktioniert. Sie können alle Kontrollkästchen aktivieren (mit .select-all), und wenn eines dieser Kontrollkästchen (.chk-box) deaktiviert ist, wird auch die Option .select-all deaktiviert. Außerdem wird das .select-all auch ein div (.hidethis) verbergen. Ich bin im Lernzustand, also wenn jemand (wenn einfach) mir einen schöneren Code mit dieser Funktionalität zeigen kann, ist es sehr willkommen! Es kann mir viel lernen!

<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

Ihr Code ist nicht hässlich - aber if($(".select-all").length == $(".select-all:checked").length) ist nicht sofort klar, was es tut (wenn Ihr Ziel ist hier die Lesbarkeit ist). Außerdem brauchen Sie nicht das if/else auf der Select-All-Änderung, da Sie immer alle chk-Boxen auf den Wert von select-all setzen wollen.

Here's a fiddle I made das ist ein bisschen sauberer. Ich mache einfach eine Schleife über alle Kontrollkästchen, um zu sehen, ob sie alle gesetzt sind oder nicht. Der Check All Handler wendet nur seinen Wert auf alle Checkboxen an. Das Versteck kann nur in diesen beiden Ereignissen behandelt werden.

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