I am facing an issue where two forms on the same page have labels with 'for' attributes pointing to checkboxes with identical IDs and names.
When I click a label in the second form, it ends up checking the checkbox in the first form.
The problem arises specifically when clicking the label for 'x name 2', as it checks the 'x name' checkbox even though they belong to different forms:
.customCheckbox div label {
padding: 5px;
background-color: white;
border: 2px solid #aaaaaa;
background-image: none;
}
.customCheckbox div input {
margin: 8px auto;
padding: 5px;
text-align: left;
margin-left: -999999px;
float: left;
}
.customCheckbox input[type=checkbox]:checked ~ label,
.customCheckbox input[type=radio]:checked ~ label {
background-color: #117399;
color: #eeeeee;
}
.customCheckbox input[type=radio]:checked ~ label {
background-color: #117399;
color: #eeeeee;
}<form style="margin:30px;">
<div class="customCheckbox">
<div>
<input id="x" name="x" type="checkbox"/><label for="x">x name</label>
</div>
<br/>
<div>
<input id="y" name="y" type="checkbox"/> <label for="y">y name</label>
</div>
</div>
</form>
<form style="margin:30px;">
<div class="customCheckbox">
<div>
<input id="x" name="x" type="checkbox"/><label for="x">x name 2</label>
</div>
<br/>
<div>
<input id="y" name="y" type="checkbox"/> <label for="y">y name 2</label>
</div>
</div>
</form>- I prefer not to change the element names as this is occurring in multiple places
- Avoiding JavaScript would be preferred if possible
- Due to using CSS for styling, nesting the checkbox inside the label is not an option (as parent elements cannot be styled in CSS)