单击时取消选择单选按钮答案

【问题标题】：Unselect radio button on click单击时取消选择单选按钮
【发布时间】：2019-04-11 22:47:08
【问题描述】：

我正在尝试通过单击 jquery 来取消选择单选按钮。

想要的行为：

如果单击的单选按钮已被选中，请取消选中
如果单击的单选按钮未选中，请选中

还有我的代码：

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

我的问题是它总是取消选中我点击的任何内容。
编辑：更正了 id 转录错误
EDIT2：不能同时选择两个单选按钮！

【问题讨论】：

您的标记不正确，您有两个具有相同 ID 和名称的元素
您将相同的id 用于多个radios。不允许
是否需要使用单选按钮？根据我的经验，如果您想取消选择选项复选框，则更容易处理。编写 javascript 以在进行选择时取消全选。
@Shaded Checkboxes 允许用户选择“无、一个或多个”选项，而收音机允许用户选择“无或一个”选项。
是的，必须使用单选按钮

标签： javascript jquery html radio-button

【解决方案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

【讨论】：

不能同时选择两个单选按钮！
为了渐进增强，您可以提供一个“n/a”选项并使用 javascript 将其删除。

【解决方案2】：

查看此演示：http://jsfiddle.net/535dR/1/

代码：

$('.table input[type="radio"]').on('mouseup', function() {
    var radio = $(this);
    if(radio.prop('nc') == 0) {
        setTimeout(function() {
            // *to work: this needs to run only after the event completes*
            if(radio.is(':checked')) radio.removeAttr('checked');
            radio.prop('nc', 1);
        }, 10); 
    }
    else radio.prop('nc', 0);
});

更新的演示： http://jsfiddle.net/535dR/3/

解决了 cmets 中提到的两点。

【讨论】：

一个小怪癖是在初始加载时，如果您单击选定的收音机，它不会取消选择，并且需要再次单击。除此之外，它看起来不错！
是的，看起来不错，除非您从一个收音机更改为另一个收音机，它会取消选择第一个而不是选择第二个，反之亦然。
不，我的意思不是应该同时选择两者，而是行为并不完美
我上次的demo不是很完美吗？

【解决方案3】：

这是一个简单的工作 JSFiddle：http://jsfiddle.net/2te28/61/

代表单选按钮的 html 标签的 <id> 和 <name> 必须是唯一的，因此更改为：

<input type="radio" id="radio1" name="1"  class="radio"/>
<input type="radio" id="radio2" name="2"  class="radio"/>

然后，您可以添加一些简单的 JQuery 代码：

var radioChecked = $('.table .radio').is(':checked');

$('.table .radio').click(function() {
    radioChecked = !radioChecked;
    $(this).attr('checked', radioChecked);
});

【讨论】：

不能同时选择两个单选按钮！

【解决方案4】：

<input type="radio" id="radio1" name="1"  class="radio"/>
<input type="radio" id="radio2" name="2"  class="radio"/>

那么你只需要添加

$('.radio').click(function(){

value = $(this).val();

if(val == 1){

$('#radio1').removeAttr('checked');

}

else{

$('#radio2').removeAttr('checked');

}

});

这对我有用

【讨论】：

【解决方案5】：

我做的很简单。

我在开头设置了RadioButton.style.textDecoration = "none"。这对RadioButton 元素没有任何影响，但设置仍然存在。

然后，在OnClick 事件中，我检查textDecoration。如果是"none" 我设置RadioButton.checked = true 和textDecoration = "underline"

如果是"underline"，我设置RadioButton.checked = false 和textDecoration = "none"

【讨论】：