В этом ответе переключатели не рассматриваются как флажки (пользователям это очень не нравится), и он пытается представить чуть более реалистичный сценарий.
$("tr.myRow").click(function(e) {
// dont override the radio inputs default
if ($(e.target).hasClass("childRadio") || e.target.tagName == 'LABEL')
return;
// find the child radio, and if it's not checked, check it.
var $childRadio = $("input.childRadio", $(this));
if (!$childRadio.attr('checked')) {
$childRadio.attr('checked', 'checked');
}
});
Я пошел на неприятностидобавить метки и использовать свойство name, чтобы переключатели были сгруппированы (что является причиной наличия переключателей).Таким образом, это сохраняет максимально возможное поведение по умолчанию и просто увеличивает количество кликов для выбора определенной дочерней радиокнопки.
Пример HTML ниже.
<tr class="myRow">
<td>
<div>Some Content</div>
<div>
<label for="radio1">Radio 1 Label</label>
<input type='radio' id="radio1" class="childRadio" checked="checked" name="Group1">
</div>
<div>More Content</div>
</td>
</tr>
<tr class="myRow">
<td>
<div>
<label for="radio2">Radio 2 Label</label>
<input type='radio' id="radio2" class="childRadio" name="Group1">
</div>
</td>
</tr>