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>