$('td').click(function () { if ($(this).children(':radio').length) { $(this).children(':radio').attr('checked', true); } else if ($(this).children('label').length) { var target = $(this).children('label').attr('for'); $('#' + target).attr('checked', true); } else { return false; } }); $('label').click(function () { var target = $(this).attr('for'); $('#' + target).attr('checked', true); });
<table> <tr> <th>ラベル</th> <th>ラジオボタン</th> </tr> <tr> <td> <label for="item1">label1</label> </td> <td> <input type="radio" name="selectTime[]" id="item1"> </td> </tr> <tr> <td> <label for="item2">label2</label> </td> <td> <input type="radio" name="selectTime[]" id="item2"> </td> </tr> <tr> <td> <label for="item3">label3</label> </td> <td> <input type="radio" name="selectTime[]" id="item3"> </td> </tr> </table>
body { padding:20px; } table { width: 250px; border: 1px solid #cccccc; font-size: 18px; margin:auto; } th { padding: 3px; border: 1px solid #cccccc; border-bottom-width: 2px; text-align: center; } td { padding: 3px; border: 1px solid #cccccc; text-align: center; width:150px; }