Как обрабатывать флажки при зацикливании в HTML-сервисе Google Apps Script?

Question

Я создаю веб-приложение с помощью скрипта Служб Google, используя флажки с сайта MaterializedCss.com. Я столкнулся с проблемой, очевидно, с моей структурой html относительно моих флажков или моей кнопки.

Мне нужно, чтобы при нажатии кнопки «Выбрать все» были установлены все флажки.

Теперь эта кнопка ничего не делает, все флажки, кроме первого, неактивны при нажатии. Я могу поставить галочку / снять только первый флажок. И когда я нажимаю на остальные из них, он меняет первый на проверенный / непроверенный.

 //a button from Materializedcss.com
<a class = "select-buttons waves-effect waves-light" id = "selectAll">Select all</a> 

   //Css style for this <a> tag  
    .select-buttons {
      height: 40px;
      width: 90px;
      font-size: 15px;
      background-color: Transparent;
      text-decoration: underline;
      };


    <div class = "container">

        //collapsible element from MaterializeCss site
        <ul class="collapsible">
        <li>
          <div class="collapsible-header teal lighten-2"><i class="material-icons">arrow_drop_down</i>1 step: choose employees</div>
          <div class="collapsible-body">
          <span>  

    <a class = "select-buttons waves-effect waves-light" id = "selectAll">Select all</a> 

    //looping thru my backend function using scriptlets
    <? for (var i = 0; i < loopNamesForSidebar().names.length; i++) {?>
        <label for = "check">
        <input type="checkbox" class="filled-in" checked="checked" id = "check"/>
         <span>

         //to collect elements together in rows
          <div class="collection">     
          <a href=" <?= loopNamesForSidebar().calendars[i] ?>" class="collection-item"><?= loopNamesForSidebar().names[i]  ?> </a>
             </div>
             </span>

             <? } ?>
             </label>
          </span>
         </div>
        </li>
      </div> <!--closed container -->

//Javascript part
<script>

//on page load, run function
document.addEventListener('DOMContentLoaded', function() {

    //when clicking a button "select All"
    document.getElementById("selectAll").addEventListener("click", selAll)

     //make all checkboxes checked
function selAll() {

  //getting all checkboxes
  var allCheckboxes = document.getElementById("check")

  //make them all "checked"
  allCheckboxes.checked = true

  }
 };
 });

</script>

Answer 1

Как уже отмечалось, getElementById() возвращает только один элемент.Вместо этого вы хотите использовать метод DOM, который возвращает коллекцию элементов (например, getElementsByClassName()), и перебирать все элементы, чтобы проверить каждый из них.Попробуйте заменить следующие строки:

//getting all checkboxes
var allCheckboxes = document.getElementById("check")

//make them all "checked"
allCheckboxes.checked = true

на:

var allCheckboxes = document.getElementsByClassName("check");
for(var i=0; i<allCheckboxes.length; i++) {
   allCheckboxes[i].checked = true;
}

Для этого вам нужно добавить класс check в свои флажки.

Answer 2

В HTML значение, переданное атрибуту id элемента, должно быть уникальным идентификатором. Таким образом, вызов document.getElementById("check") вернет только один элемент (вероятно, первый элемент с заданным идентификатором).

Вам нужно установить атрибут class. Несколько элементов могут совместно использовать один и тот же класс, что позволяет вам нацеливать несколько элементов с использованием данного класса.

Затем вы можете использовать getElementsByClassName, чтобы получить требуемый список элементов.