I found a checkbox code on Codepen that I really liked, but encountered an issue when trying to use multiple checkboxes at once. Despite customizing it to my preferences, each checkbox only works independently and does not function properly when there are more than one selected (only one checks if it's above one). Is there a way to modify the code so that each checkbox can work independently without having to change classes and IDs every time? Check out this Fiddle for reference!
HTML
<div class="roundedOne">
<input type="checkbox" value="None" id="roundedOne" name="check" />
<label for="roundedOne"></label>
</div>
<div class="roundedOne">
<input type="checkbox" value="None" id="roundedOne" name="check" />
<label for="roundedOne"></label>
</div>
<div class="roundedOne">
<input type="checkbox" value="None" id="roundedOne" name="check" />
<label for="roundedOne"></label>
</div>
<div class="roundedOne">
<input type="checkbox" value="None" id="roundedOne" name="check" />
<label for="roundedOne"></label>
</div>
CSS
.roundedOne {
width: 20px;
height: 20px;
position: relative;
background: #fcfff4;
border: 2px solid #77c100;
border-radius: 3px;
}
.roundedOne label:after {
content: '';
width: 14.5px;
height: 15px;
position: absolute;
top: 2px;
left: 2px;
background: #77c100;
opacity: 0;
border-radius: 3px;
}
.roundedOne label:hover::after {
opacity: 0.3;
}
.roundedOne input[type=checkbox] {
visibility: hidden;
}
.roundedOne input[type=checkbox]:checked + label:after {
opacity: 1;
}