javascript - 单击取消选择单选按钮

Question

我正在尝试使用 jquery 取消选择单选按钮。

想要的行为:

1. 如果点击的单选按钮已经被选中，取消选中
2. 如果点击的单选按钮没有被勾选，勾选

这是我的 fiddle :http://jsfiddle.net/2te28/15/

和我的代码:

$('.table').on('click mousedown', '.radio', function() {
    if($(this).attr('id') == $(this).parents('tr').find('.radio:checked').attr('id'))
        $(this).removeAttr('checked');
});

我的问题是无论我点击什么，它总是被取消选中。
编辑:更正了 id 转录错误
EDIT2:不能同时选择两个单选按钮!

Answer 1

更改您的 HTML。您已经更改了 id，但您还必须更改 name。

$('.table').on('click', '.radio', function() {
  if (this.getAttribute('checked')) { // check the presence of checked attr
    $(this).removeAttr('checked'); // if present remove that
  } else {
    $(this).attr('checked', true); // if not then make checked
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <tr>
    <td>
      <input type="radio" id="radio1" name="1" checked="checked" class="radio" />
      <input type="radio" id="radio2" name="2" checked="checked" class="radio" />
    </td>
  </tr>
</table>

DEMO

根据评论

$('.table').on('click', '.radio', function() {
  if (this.getAttribute('checked')) {
    $(this).removeAttr('checked');
    $(this).siblings('.radio').attr('checked', false);
  } else {
    $(this).attr('checked', true);
    $(this).siblings('.radio').removeAttr('checked');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <tr>
    <td>
      <input type="radio" id="radio1" name="1" checked="checked" class="radio" />
      <input type="radio" id="radio2" name="2" checked="checked" class="radio" />
    </td>
  </tr>
</table>

DEMO