Программная проверка всех флажков не работает должным образом, когда какие-либо целевые флажки отмечены / сняты вручную

1

Программный контроль всех флажков не работает должным образом, когда какой-либо из целевых флажков отмечен или снят вручную. У меня есть два метода, в которых каждый будет проверять все флажки, а другие не будут проверять все флажки

Я назвал их selectAll и unSelectall. когда selectAll запускается, он будет проверять все флажки, но при запуске unSelectall он отменяет все флажки, но в чем проблема, когда вы проверяете/снимаете галочку с любым из целевых флажков, а затем вы нажимаете checkall или снимаете галочку, вручную /unchecked флажки не работают. вот рабочий код на скрипке

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++;
    }
  }
  • 1
    Как предлагает @ gurvinder372 , вы должны использовать .checked . Но вам не нужно 2 функции. Вы можете создать одну функцию, которая будет принимать значение true для выбора и false для отмены выбора и обрабатывать соответственно. Обновлена скрипка . Кроме того, id элемента должен быть уникальным.
Теги:
ecmascript-6

1 ответ

0
Лучший ответ

Вместо 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++;
    }
  }

демонстрация

<!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>
Поделиться
  • 0
    Может быть, вам нужно добавить проверку только в том случае, если all и uncheckAll флажок Все проверены, вы должны продолжить. Рассмотрим случай: 1. Выберите отметить все. 2. Выберите unchckall. (Теперь ничего не будет проверено, кроме флажков checkall и uncheckall). 3. Теперь снимите флажок галочки. (будут установлены все флажки. Так как onclick запускается независимо от состояния выбранного поля, он выполняет операцию)
  • 0
    @VigneshRaja Это часть UX и не обсуждается. Я согласен с точкой, но вопрос только в том, чтобы выбрать / отменить выбор всех. Давайте не переусердствовать.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню