无线电输入部分使用 jQuery 切换

Question

这是我的HTML：

<table>
<tr>
<td class="survey-label">LIFT</td>
<td data-label="RECOMMEND" class="choice recommended">
<input name="input_1" type="radio" value="yes" id="c_1_1" data-default="yes">
</td>
<td data-label="NOT RECOMMEND" class="choice not-recommended">
<input name="input_2" type="radio" value="no" id="c_1_2" data-default="no">
</td>
</tr>
<tr>
<td class="survey-label">WALK</td>
<td data-label="RECOMMEND" class="choice recommended">
<input name="input_1" type="radio" value="yes" id="c_2_1" data-default="yes">
</td>
<td data-label="NOT RECOMMEND" class="choice not-recommended">
<input name="input_2" type="radio" value="no" id="c_2_2" data-default="no">
</td>
</tr>
</table>

我可以通过第二次单击父无线电来单独选择/取消选择输入无线电吗？

到目前为止，我已经完成了：

<script type="text/javascript">
jQuery(document).ready(function($) {
var click = $('.choice');
var input = click.find('input:radio');
var inputVal = input.val();
input.attr('data-default', inputVal);
input.attr('data-alt');
click.on("click", function() {
var input = $(this).find('input:radio');    
var def = input.attr('data-default');
var alt = input.attr('data-alt');
(input.val() == def) ? input.val(alt) : input.val(def);
$(this).toggleClass('none-slected');
});
});
</script>

我可以选择/取消选择单个收音机，但坚持在表格行上选择不同的收音机。

Answer 1

试试这个

$('.choice').on('click', function(e) {
var row = $(this).parent()
var radio = $(this).find('input:radio')
if (e.target == this) {
radio.prop("checked", !radio.is(':checked'))
} else {
if (radio.attr('was-checked') == 'true')
radio.prop("checked", false)
}
row.find('input:radio').attr('was-checked', false)
row.find('td').removeClass('selected')
radio.attr('was-checked', radio.is(':checked'))
if (radio.is(':checked'))
$(this).addClass('selected')
})

table {
width: 100%
}
.selected {
background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table>
<tr>
<td class="survey-label">LIFT</td>
<td data-label="RECOMMEND" class="choice recommended">
<input name="input_1" type="radio" value="yes" id="c_1_1" data-default="yes"> Yes
</td>
<td data-label="NOT RECOMMEND" class="choice not-recommended">
<!-- this should be input_1 -->
<input name="input_1" type="radio" value="no" id="c_1_2" data-default="no"> No
</td>
</tr>
<tr>
<td class="survey-label">WALK</td>
<td data-label="RECOMMEND" class="choice recommended">
<!-- this should be input_2 -->
<input name="input_2" type="radio" value="yes" id="c_2_1" data-default="yes"> Yes
</td>
<td data-label="NOT RECOMMEND" class="choice not-recommended">
<input name="input_2" type="radio" value="no" id="c_2_2" data-default="no"> No
</td>
</tr>
</table>