Is there a way to use only HTML, CSS, SCSS, and Bootstrap 4 to make all checkboxes default to the "on" condition when a button is clicked? Typically, this functionality would be achieved with JavaScript, but due to constraints, I am exploring alternative solutions. If anyone has tackled this challenge before, please share your approach.
<div class="welcome-left-btn">
<label class="switch">
<input type="checkbox" name="chk" checked>
<span class="slider round"></span>
</label>
</div>
<div class="welcome-left-btn">
<label class="switch">
<input type="checkbox" name="chk" checked>
<span class="slider round"></span>
</label>
</div>
<button id="defaultbtn" class="btn" type="submit">Defaultbtn</button>
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 23px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 19px;
width: 19px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #3861fb;
}
input:focus + .slider {
box-shadow: 0 0 1px #3861fb;
}
input:checked + .slider:before {
-webkit-transform: translateX(17px);
-ms-transform: translateX(17px);
transform: translateX(17px);
}
.slider.round {
border-radius: 25px;
}
.slider.round:before {
border-radius: 50%;
}