How can I implement a functionality where clicking on a checkbox button scrolls to the next section containing checkboxes, and there is also a select all button that scrolls to the bottom when clicked? Below is the code snippet with my attempt:
.select {
margin: 4px;
background-color: #06213B;
border-radius: 4px;
border: 0px solid #fff;
overflow: hidden;
float: left;
}
.select label {
float: left;
line-height: 4.0em;
width: 26.0em;
height: 4.0em;
}
.select label span {
text-align: center;
padding: 0px 0;
display: block;
}
.select label input {
position: absolute;
display: none;
color: #fff !important;
}
/* selects all of the text within the input element and changes the color of the text */
.select label input+span {
color: #fff;
font-size: 19px;
font-weight: 500;
font-family: default;
}
/* This will declare how a selected input will look giving generic properties */
.select input:checked+span {
color: #ffffff;
text-shadow: 0 0 0px rgba(0, 0, 0, 0.8);
}
...
<!doctype html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" />
<script>
window.addEventListener('DOMContentLoaded', function() {
const checks = document.querySelectorAll('.chk');
const checkAll = document.getElementById('selectAll')
document.addEventListener('click', function(e) {
const tgt = e.target;
if (tgt.matches('.chk')) {
if (tgt.id === "selectAll") {
tgt.closest('div').querySelector('i').classList[tgt.checked ? 'add' : 'remove']('fa-circle-check');
checks.forEach(chk => {
chk.checked = tgt.checked
chk.closest('div').querySelector('i').classList[chk.checked ? 'add' : 'remove']('fa-circle-check');
})
} else {
tgt.closest('div').querySelector('i').classList[tgt.checked ? 'add' : 'remove']('fa-circle-check');
checkAll.checked = [...checks].slice(1).every(chk => chk.checked); // check all sub checkboxes are checked
checkAll.closest('div').querySelector('i').classList[checkAll.checked ? 'add' : 'remove']('fa-circle-check');
}
}
});
});
</script>
</head>
<body>
<div class="select action">
<label>
<input type="checkbox" class="chk" id="selectAll" value="1"><span><i class="fa-solid fa-circle"></i> </span>
</label>
</div><br clear="all" />
<h2>Some other place</h2><br clear="all" />
<br clear="all" />
...
<div class="mypoints">
<label>
<input type="checkbox" class="chk" value="1"><span><i class="fa-solid fa-circle"></i> </span>
</label>
</div>
</body>If you could provide any guidance, it would be greatly appreciated.