循環使用Google Apps腳本的HTML Service時如何處理復選框？

Question

我正在使用MaterializedCss.com中的復選框使用Google Apps腳本創建一個Web應用程序。 我的html結構與我的復選框或按鈕有關，顯然遇到了問題。

我需要通過單擊按鈕“ SelectAll”來選中所有復選框。

現在，此按鈕不執行任何操作，單擊時除第一個復選框以外的所有復選框均處於非活動狀態。 我只能勾選/取消選中第一個復選框。 當我單擊其余的時，它將第一個更改為選中/未選中。

 //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

在HTML中，傳遞給元素的id屬性的值是唯一標識符。 因此，調用document.getElementById("check")將僅返回單個元素（可能是具有給定id的第一個元素）。

您需要設置class屬性。 多個元素可以共享同一類，這使您可以使用給定的類來定位多個元素。

然后，您可以利用getElementsByClassName檢索所需的元素列表。

Answer 2

如前所述， 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;
}

為此，您需要在復選框中添加一個“檢查”類。