How to handle checkboxes when looping in HTML Service of Google Apps Script?

问题: I am creating a web app with Google Apps script using checkboxes from MaterializedCss.com. I encountered a problem with apparently my html scructure in relation to my check...

问题:

I am creating a web app with Google Apps script using checkboxes from MaterializedCss.com. I encountered a problem with apparently my html scructure in relation to my checkboxes or my button.

I need that by clicking the button "SelectAll" all checkboxes are selected.

Now this button doesn't do anything, all checkboxes except first one are inactive when clicked. I can tick/untick only first checkbox. And when I click on the rest of them it changes the first one to checked/unchecked.

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

回答1:

As pointed out already, getElementById() only ever returns one element. Instead you want to use a DOM method which returns a collection of elements (like getElementsByClassName()), and loop through all the elements to check each one. Try replacing these lines:

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

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

with:

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

You'll need to add a "check" class to your checkboxes for this.


回答2:

In HTML, the value passed to the id attribute of an element is meant to be a unique identifier. Thus, the invocation document.getElementById("check") will only return a single element (probably the first element with the given id).

What you need is to set the class attribute. Multiple elements can share the same class which allows you to target multiple elements using a given class.

You can then leverage getElementsByClassName to retrieve the desired list of elements.

  • 发表于 2019-03-27 01:32
  • 阅读 ( 153 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除