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>

收音机输入部分使用jQuery切换

1 个答案: