'Making a table cell function as a radio button

I have an input where users select one of two text strings which are displayed next to each other in a table. Currently there are radio buttons underneath, but I want to combine both functions so users can click the text itself to select.

<table>
<tbody>
  <tr>
    <td><div><b>Text A</b></div></td>
    <td><div><b>Text B</b></div></td>
  </tr>
<tr>
<td style="width: 50%; border: 2px solid #000000; padding: 1em; border-radius: 0.5em; vertical-align: top;">
<div>Text example</div>
</td>
<td style="width: 50%; border: 2px solid #000000; padding: 1em; border-radius: 0.5em; vertical-align: top;">
<div>Here is some even longer text</div>
</td>
</tr>
<tr>
<td style="height: 50px; text-align: center; padding-top: 20;"><label> <input class="form-check" name="selection" type="radio" value="A" /> </label></td>
<td style="height: 50px; text-align: center; padding-top: 20;"><label> <input class="form-check" name="selection" type="radio" value="A" /> </label></td>
</tr>
</tbody>
</table>
htmlcssinput


Solution 1:[1]

This is what labels are used for. You have labels wrapped around your radio buttons but without any text in them they aren't doing very much. You can instead move the labels to the text cells and set the for attribute to the radio id.

<table>
<tbody>
  <tr>
    <td><div><b>Text A</b></div></td>
    <td><div><b>Text B</b></div></td>
  </tr>
<tr>
<td style="width: 50%; border: 2px solid #000000; padding: 1em; border-radius: 0.5em; vertical-align: top;">
<label for="input1">Text example</label>
</td>
<td style="width: 50%; border: 2px solid #000000; padding: 1em; border-radius: 0.5em; vertical-align: top;">
<label for="input2">Here is some even longer text</label>
</td>
</tr>
<tr>
<td style="height: 50px; text-align: center; padding-top: 20;"><input id="input1" class="form-check" name="selection" type="radio" value="A" /></td>
<td style="height: 50px; text-align: center; padding-top: 20;"><input id="input2" class="form-check" name="selection" type="radio" value="A" /> </td>
</tr>
</tbody>
</table>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 elvey

Related Questions