Question

当手动选中/取消选中任何目标复选框时，以编程方式检查所有复选框无法正常工作我有两种方法，一种是检查所有复选框，另一种是不检查所有复选框值

我将它们命名为selectAll和unSelectall。当selectAll被触发时，它将检查所有复选框，但是当unSelectall被触发时，它取消选中所有复选框，但是当你选中/取消选中任何目标复选框然后单击checkall或取消选中all时，问题是什么，手动检查/未选中复选框不起作用。这是fiddle

上的工作代码

function selectAll() {
    const checkboxes = document.querySelectorAll('.myCheck');
    let i = 0;
    while(i < checkboxes.length) {
      checkboxes[i].setAttribute("checked", "checked");
      i++;
    }
  }
  function unSelectAll() {  
    const checkboxes = document.querySelectorAll('.myCheck');
    let i = 0;
    while(i < checkboxes.length) {
      checkboxes[i].removeAttribute("checked", "");
      i++;
    }
  }

Answer 1

使用直接setAttribute属性

而不是removeAttribute和checked

  function selectAll() {
    const checkboxes = document.querySelectorAll('.myCheck');
    let i = 0;
    while (i < checkboxes.length) {
      checkboxes[i].checked = true;
      i++;
    }
  }

  function unSelectAll() {
    const checkboxes = document.querySelectorAll('.myCheck');
    let i = 0;
    while (i < checkboxes.length) {
      checkboxes[i].checked = false;
      i++;
    }
  }

<强>演示

＆＃13;

<!DOCTYPE html>
<html>

  <body>

    All:
    <input onclick="selectAll();" type="checkbox" id="all"> uncheckAll:
    <input onclick="unSelectAll();" type="checkbox" id="all">
    <br/> ckbx1:
    <input type="checkbox" class="myCheck"> ckbx2:
    <input type="checkbox" class="myCheck"> ckbx3:
    <input type="checkbox" class="myCheck"> ckbx4:
    <input type="checkbox" class="myCheck">

    <p>checl all and uncheck all</p>

    <script>
      function selectAll() {
        const checkboxes = document.querySelectorAll('.myCheck');
        let i = 0;
        while (i < checkboxes.length) {
          checkboxes[i].checked = true;
          i++;
        }
      }

      function unSelectAll() {
        const checkboxes = document.querySelectorAll('.myCheck');
        let i = 0;
        while (i < checkboxes.length) {
          checkboxes[i].checked = false;
          i++;
        }
      }

    </script>

  </body>

</html>

＆＃13;

当手动选中/取消选中任何目标复选框时，以编程方式检查所有复选框无效

1 个答案: