循环使用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;
}

为此，您需要在复选框中添加一个“检查”类。