Toggle HTML radio button by clicking its label

Solution 1:

You can also wrap your elements without giving them each an ID, since a <label> is implicitly for the input it contains, like this:

<label>
   <input type="radio" name="mode" value="create">
   <i>create table</i>
</label>

Solution 2:

You can use <label> elements, which are designed to do exactly that:

<input type="radio" id="radCreateMode" name="mode" value="create" />
<label for="radCreateMode"><i>create table</i></label>

Solution 3:

Wrapping the input under the label should work.

<label>
    <input type="radio" name="mode" value="create"><i>create table</i>
</label>

Solution 4:

I had trouble finding the value of the radio button using this method, an alternative is to use a hit area increasing clickable area of a button.