jquery - JQuery Check All 链接只出现一次

Question

我有以下代码。它似乎可以工作，因为它将选中所有框，然后取消选中它们。但是，在第一轮之后，它停止检查和取消检查。它只会检查一次并取消选中所有复选框。之后，我只显示和隐藏超链接切换。

<script type="text/javascript">
      function selectAll(){
        $("input[type=checkbox]").each(function(){
          $(this).attr('checked', true);
        });
        $("#select_all").hide();
        $("#unselect_all").show();
      }

      function unselectAll(){
        $("input[type=checkbox]").each(function(){
          $(this).attr('checked', false);
        });
        $("#select_all").show();
        $("#unselect_all").hide();
      }
</script>

Answer 1

尝试使用prop()而不是attr()asattr()与选中属性一起使用时会产生意外结果，您不需要在each()这里使用，也可以分配一些class来对复选框进行分组，而不是应用于页面上的所有复选框。您可以使用类选择器来选择具有相同的复选框（元素）class。

 function selectAll(){
    $("input[type=checkbox]").prop('checked', true);
    $("#select_all").hide();
    $("#unselect_all").show();
  }

  function unselectAll(){
    $("input[type=checkbox]").prop('checked', false);
    $("#select_all").show();
    $("#unselect_all").hide();
  }

Answer 2

使用.prop()代替.attr()：

<script type="text/javascript">
      function selectAll(){
        $("input[type=checkbox]").each(function(){
          $(this).prop('checked', true);
        });
        $("#select_all").hide();
        $("#unselect_all").show();
      }

      function unselectAll(){
        $("input[type=checkbox]").each(function(){
          $(this).prop('checked', false);
        });
        $("#select_all").show();
        $("#unselect_all").hide();
      }
</script>