htmlformsradio-group

Radio Groups with clickable label


From what I have gathered, in order to make a label of a radio button clickable, you must assign the same "name" attribute value to both elements.

The problem I am having is when you have more than one radio button, say a "yes or no" type selection. In order to make it to where if you click one, the other disables is that both radio buttons "name" attribute has to be the same value.

Is it possible to do both?

<label for="no">No</label> 
<input type="radio" name="no" value="no" />

<label for="yes">Yes</label> 
<input type="radio" name="yes" value="yes" />

Solution

  • id (not name) attribute should be referred by label's for attribute. It should be like this: http://jsfiddle.net/zzsSw/

    <label for="no">No</label> 
    <input type="radio" name="mygroup" id="no" value="no" />
    
    <label for="yes">Yes</label> 
    <input type="radio" name="mygroup" id="yes" value="yes" />