如何使重置/清除单选按钮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()方法或:not()选择器来排除您不想重置的那些：

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

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

$('#reset').on('click', function() {
    $('input[type=radio]').not('[name="rdo1"]').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>