Menu
I have been experimenting with the following code.
The first checkbox works as I desire when the label is clicked, the background color changes (toggles)
However the second checkbox does not change background color when clicked.
Other than then class=”blue” setting in the second checkbox <input …> statement, they look the same to me.
Can someone tell me why the 1st works as expected, but the 2nd does not ???
[code]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title> CBox Toggle Test </title>
<style>
.lime { background-color: lime; }
.blue { background-color: #abcdef; }
#cb0, #cb1 { opacity: 0; }
/* following does not seem to work when exposed with other attempts
#cb0 input[type=’checkbox’]:checked { background-color: lime; }
#cb1 input[type=’checkbox’]:checked { background-color: lime; }
/* */
</style>
</head>
<body>
<input type=”checkbox” id=”cb0″><label for=’cb0′> CBox 1 Toggle </label> <p />
<input type=”checkbox” id=”cb1″><label for=’cb1′ class=”blue”> CBox 2 Toggle </label>
<script>
function init() {
const sel = document.querySelectorAll(‘input[type=”checkbox”]’); // alert(sel.length);
for (let i=0; i<sel.length; i++) {
sel[i].addEventListener(‘click’,
function () { let x = sel[i].nextElementSibling; x.classList.toggle(‘lime’); } );
};
} init();
</script>
</body>
</html>