如何制作重置/清除单选按钮JS，但1个收音机除外

Question

我想制作4行单选按钮 第1行，第2行，第3行和最后一行

如果我点击重置按钮 单选按钮恢复正常选择（选中或取消选中） 但我想让第1行不受影响（不重置） 因为这个脚本重置/清除所有单选按钮

谢谢

$('#reset').on('click', function() {
  $('input[type=radio]').prop('checked', function() {
    return this.getAttribute('checked') == 'checked';
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="radio" name="rdo1" value="a" checked="checked" /> A
      <input type="radio" name="rdo1" value="b" /> B
      <input type="radio" name="rdo1" value="c" /> C
    </td>
  </tr>
  <tr>
    <td>
      <input type="radio" name="rdo2" value="1" /> 1
      <input type="radio" name="rdo2" value="2" checked="checked" /> 2
      <input type="radio" name="rdo2" value="3" /> 3
    </td>
  </tr>
  <tr>
    <td>
      <input type="radio" name="rdo3" value="1a" /> 1a
      <input type="radio" name="rdo3" value="2b" /> 2b
      <input type="radio" name="rdo3" value="3c" checked="checked" /> 3c
    </td>
  </tr>
  <tr>
    <td>
      <input type="radio" name="rdo4" value="11a" /> 1a
      <input type="radio" name="rdo4" value="12b" /> 2b
      <input type="radio" name="rdo4" value="13c" /> 3c
    </td>
  </tr>
  <tr>
    <td>
      <button id="reset">Reset</button>
    </td>
  </tr>
</table>

Answer 1

您可以通过获取名称或使用.not选择器

来检查

$('#reset').on('click', function() {
    $('input[type=radio]').prop('checked', function () {
        var rdoName = $(this).attr('name');
        if(rdoName != 'rdo1'){
            return this.getAttribute('checked') == 'checked';
        }
    });
});

Answer 2

您可以使用.not() method或:not() selector排除您不想重置的内容：

$('input[type=radio]').not('[name="rdo1"]').prop('checked', function () {
    return this.getAttribute('checked') == 'checked';
});

展开并运行以下代码段以在上下文中查看。

＆＃13;

＆＃13;

$('#reset').on('click', function() {
    $('input[type=radio]').not('[name="rdo1"]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
        <tr>
            <td>
                <input type="radio" name="rdo1" value="a" checked="checked" />
                A
                <input type="radio" name="rdo1" value="b" />
                B
                <input type="radio" name="rdo1" value="c" />
                C
            </td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="rdo2" value="1" />
                1
                <input type="radio" name="rdo2" value="2" checked="checked" />
                2
                <input type="radio" name="rdo2" value="3" />
                3
            </td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="rdo3" value="1a" />
                1a
                <input type="radio" name="rdo3" value="2b"  />
                2b
                <input type="radio" name="rdo3" value="3c" checked="checked" />
                3c
            </td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="rdo4" value="11a" />
                1a
                <input type="radio" name="rdo4" value="12b"  />
                2b
                <input type="radio" name="rdo4" value="13c"/>
                3c
            </td>
        </tr>
        <tr>
            <td>
                <button id="reset">Reset</button>
            </td>
        </tr>
    </table>

＆＃13;

＆＃13;

＆＃13;