You can toggle the checkbox background on check click using the class toggle function. With the added css style below when the checkbox is clicked it will have green background if checked or red if not.
I wrapped the snippet in an IIFE to avoid any potential namespace corruption.
(vanilla solution though)
Add this inside <head>
<style>
.checkbox-toggle:not(.isChecked) {
background: red;
}
.checkbox-toggle.isChecked {
background: green;
}
</style>
Add this before </body>
<script>
void function() {
const checkboxes = document.getElementsByClassName(".checkbox-toggle");
for (const checkbox of checkboxes) {
void checkbox.classList.add('isChecked');
checkbox.onclick = check;
}
function check(e) {
const currentCheckbox = e.target || e.srcElement;
void currentCheckbox.classList.toggle('isChecked');
};
}();
</script>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
