In the image below, if I click either male or female text, I want the checkbox to be checked. How can I do that?
Second option is to wrap both checkbox and text in a label
. It will work too:
<label>
<input id="male_checkbox" name="gender" type="checkbox" value="male" /> Male
</label>
You need to use label with for attribute:
<label for="male_checkbox">Male</label>
<input id="male_checkbox" name="gender" type="checkbox" value="male" />
<input type="checkbox" name="male" id="male" value="male"><label for="male">Male</label>
This will allow the user to click either the name or the checkbox
Do the same for female.