In our example we have 5 separate sections: 4 transactions configured on panels and 1 transaction on grid. The checkboxes are marked with the blue rectangles. On the very top we have another blue rectangle, which marks our «select all» javascript placed in the HTML container. Below you can find the script, which is ready to be pasted into your HTML container on the document:
<script>
document.getElementById(‘selectAll’).onclick = function(){
if(this.checked) {
var checkboxes = document.getElementsByClassName(‘mstrmojo-Label tristate’);
for (var checkbox of checkboxes) {
if(checkbox.className == ‘mstrmojo-Label tristate’) {
checkbox.click();}
}
}else{
var elems = document.getElementsByClassName(«flag-container»);
for (var i = 0;i<elems.length;i++) {
var uncheck= elems[i].parentNode.lastElementChild;
const div1 = document.getElementById(uncheck.id);
const exampleAttr= div1.getAttribute(‘class’);
if(exampleAttr == ‘mstrmojo-Label tristate checked’) {
uncheck.click();}
}
}
}
</script>
<body>
<input id=»selectAll» type=»checkbox» onClick=»toggle(this)» /> Read All<br/>
</body>
When you run the document you should see the «Read All» new checkbox:
