I have multiple checkbox button elements on my page, whenever someone clicks on each of them, their color and text are changed, I was able to do that with CSS, but I wanted to change the icon in the checkbox button also, So I Use javascript in my HTML code but when I run the script it only works for one element, only the first one, so that means the icon only change for the first checkbox button but it is not working for all the other button, I tried to give all my checkbox button unique ID but I still have the same issue
This is checkbox 1 and 2 when not selected
This is checkbox 1 and 2 when selected
Here's the code I run to do that:
document.getElementById ('checkbox').addEventListener ('click', function (ev) {
document.getElementById('icon').classList[ ev.target.checked ? 'add' : 'remove'] ('fa-circle-check');
}, false);.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);
}
/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/
.select input:checked span{background-color: #78E821;}
input[type="checkbox"] span:after{
content: "Select all";
}
input[type="checkbox"]:checked span:after{
content: "All selected";
}
.branded{
margin: 4px;
background-color: #3E8BB5;
border-radius: 4px;
border: 0px solid #fff;
overflow: hidden;
float: left;
}
.branded label {
float: left; line-height: 4.0em;
width: 16.0em; height: 4.0em;
}
.branded label span {
text-align: center;
padding: 0px 0;
display: block;
}
.branded 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 */
.branded label input span{color: #fff;
font-size: 16px;
font-weight: 500;
font-family: default;
}
/* This will declare how a selected input will look giving generic properties */
.branded input:checked span {
color: #ffffff;
text-shadow: 0 0 0px rgba(0, 0, 0, 0.8);
}
/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/
.branded input:checked span{background-color: #78E821;}
.branded input[type="checkbox"] span:after{
content: "SELECT";
}
.branded input[type="checkbox"]:checked span:after{
content: "SELECTED";
}
.lifepoints{
margin: 4px;
background-color: #3E8BB5;
border-radius: 4px;
border: 0px solid #fff;
overflow: hidden;
float: left;
}
.lifepoints label {
float: left; line-height: 4.0em;
width: 16.0em; height: 4.0em;
}
.lifepoints label span {
text-align: center;
padding: 0px 0;
display: block;
}
.lifepoints 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 */
.lifepoints label input span{color: #fff;
font-size: 16px;
font-weight: 500;
font-family: default;
}
/* This will declare how a selected input will look giving generic properties */
.lifepoints input:checked span {
color: #ffffff;
text-shadow: 0 0 0px rgba(0, 0, 0, 0.8);
}
/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/
.lifepoints input:checked span{background-color: #78E821;}
.lifepoints input[type="checkbox"] span:after{
content: "SELECT";
}
.lifepoints input[type="checkbox"]:checked span:after{
content: "SELECTED";
}
.mypoints{
margin: 4px;
background-color: #3E8BB5;
border-radius: 4px;
border: 0px solid #fff;
overflow: hidden;
float: left;
}
.mypoints label {
float: left; line-height: 4.0em;
width: 16.0em; height: 4.0em;
}
.mypoints label span {
text-align: center;
padding: 0px 0;
display: block;
}
.mypoints 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 */
.mypoints label input span{color: #fff;
font-size: 16px;
font-weight: 500;
font-family: default;
}
/* This will declare how a selected input will look giving generic properties */
.mypoints input:checked span {
color: #ffffff;
text-shadow: 0 0 0px rgba(0, 0, 0, 0.8);
}
/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/
.mypoints input:checked span{background-color: #78E821;}
.mypoints input[type="checkbox"] span:after{
content: "SELECT";
}
.mypoints input[type="checkbox"]:checked span:after{
content: "SELECTED";
}<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="https://kit.fontawesome.com/6e6e078929.js" crossorigin="anonymous"></script>
<!--Get your own code at fontawesome.com-->
</head>
<body>
<div >
<label>
<input type="checkbox" value="1" id="checkbox"><span><i id="icon"></i> </span>
</label>
</div>
</body>
</html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="https://kit.fontawesome.com/6e6e078929.js" crossorigin="anonymous"></script>
<!--Get your own code at fontawesome.com-->
</head>
<body>
<div >
<label>
<input type="checkbox" value="1" id="checkbox"><span><i id="icon"></i> </span>
</label>
</div>
</body>
</html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="https://kit.fontawesome.com/6e6e078929.js" crossorigin="anonymous"></script>
<!--Get your own code at fontawesome.com-->
</head>
<body>
<div >
<label>
<input type="checkbox" value="1" id="checkbox"><span><i id="icon"></i> </span>
</label>
</div>
</body>
</html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="https://kit.fontawesome.com/6e6e078929.js" crossorigin="anonymous"></script>
<!--Get your own code at fontawesome.com-->
</head>
<body>
<div >
<label>
<input type="checkbox" value="1" id="checkbox"><span><i id="icon"></i> </span>
</label>
</div>
<script>
document.getElementById ('checkbox').addEventListener ('click', function (ev) {
document.getElementById('icon').classList[ ev.target.checked ? 'add' : 'remove'] ('fa-circle-check');
}, false);
</script>
</body>
</html>If you want a more organized view and to see how the code is interacting, get a look at it here: https://codepen.io/edengandhi/pen/BaJoJYY
CodePudding user response：
You cannot reuse an ID. IDs MUST be unique. Use a class and delegate
And you can only have ONE set of html, head and body tags
Use a class and delegate from container
I also navigate to the i from the closest("div") but could have used nextElementSibling instead
lastly I added selectAll functionality which was not trivial - the span is annoying If you remove the span from the i, then all .closest('div').querySelector('i') can be changed to .nextElementSibling
.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);
}
/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/
.select input:checked span {
background-color: #78E821;
}
input[type="checkbox"] span:after {
content: "Select all";
}
input[type="checkbox"]:checked span:after {
content: "All selected";
}
.branded {
margin: 4px;
background-color: #3E8BB5;
border-radius: 4px;
border: 0px solid #fff;
overflow: hidden;
float: left;
}
.branded label {
float: left;
line-height: 4.0em;
width: 16.0em;
height: 4.0em;
}
.branded label span {
text-align: center;
padding: 0px 0;
display: block;
}
.branded 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 */
.branded label input span {
color: #fff;
font-size: 16px;
font-weight: 500;
font-family: default;
}
/* This will declare how a selected input will look giving generic properties */
.branded input:checked span {
color: #ffffff;
text-shadow: 0 0 0px rgba(0, 0, 0, 0.8);
}
/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/
.branded input:checked span {
background-color: #78E821;
}
.branded input[type="checkbox"] span:after {
content: "SELECT";
}
.branded input[type="checkbox"]:checked span:after {
content: "SELECTED";
}
.lifepoints {
margin: 4px;
background-color: #3E8BB5;
border-radius: 4px;
border: 0px solid #fff;
overflow: hidden;
float: left;
}
.lifepoints label {
float: left;
line-height: 4.0em;
width: 16.0em;
height: 4.0em;
}
.lifepoints label span {
text-align: center;
padding: 0px 0;
display: block;
}
.lifepoints 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 */
.lifepoints label input span {
color: #fff;
font-size: 16px;
font-weight: 500;
font-family: default;
}
/* This will declare how a selected input will look giving generic properties */
.lifepoints input:checked span {
color: #ffffff;
text-shadow: 0 0 0px rgba(0, 0, 0, 0.8);
}
/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/
.lifepoints input:checked span {
background-color: #78E821;
}
.lifepoints input[type="checkbox"] span:after {
content: "SELECT";
}
.lifepoints input[type="checkbox"]:checked span:after {
content: "SELECTED";
}
.mypoints {
margin: 4px;
background-color: #3E8BB5;
border-radius: 4px;
border: 0px solid #fff;
overflow: hidden;
float: left;
}
.mypoints label {
float: left;
line-height: 4.0em;
width: 16.0em;
height: 4.0em;
}
.mypoints label span {
text-align: center;
padding: 0px 0;
display: block;
}
.mypoints 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 */
.mypoints label input span {
color: #fff;
font-size: 16px;
font-weight: 500;
font-family: default;
}
/* This will declare how a selected input will look giving generic properties */
.mypoints input:checked span {
color: #ffffff;
text-shadow: 0 0 0px rgba(0, 0, 0, 0.8);
}
/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/
.mypoints input:checked span {
background-color: #78E821;
}
.mypoints input[type="checkbox"] span:after {
content: "SELECT";
}
.mypoints input[type="checkbox"]:checked span:after {
content: "SELECTED";
}<!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 >
<label>
<input type="checkbox" id="selectAll" value="1"><span><i ></i> </span>
</label>
</div>
<div >
<label>
<input type="checkbox" value="1"><span><i ></i> </span>
</label>
</div><br clear="all" />
<h2>Some other place</h2><br clear="all" />
<div >
<label>
<input type="checkbox" value="1"><span><i ></i> </span>
</label>
</div><br clear="all" />
<h2>Some other place</h2>
<br clear="all" />
<div >
<label>
<input type="checkbox" value="1"><span><i ></i> </span>
</label>
</div>
</body>