Currently working on a form that includes radio buttons, where an update function is triggered whenever there is a user input change.
The challenge I am facing is how to incorporate user-friendly radio buttons with a larger button area encompassing both the text and the button for easier clicking.
I am struggling to detect clicks on both the button zone, the text, and the actual button simultaneously. So far, my solution involves comparing MouseEvent.target with a list of ids assigned to each element, which doesn't seem like the most efficient approach.
<div class="buttonZone">
<input type="radio" id="choice1" />
<label for="choice1">Choice 1</label>
</div>
<div class="buttonZone">
<input type="radio" id="choice2" />
<label for="choice2">Choice 2</label>
</div>
If you have any suggestions or ideas, they would be greatly appreciated.