无法取消选择单选按钮？答案

【问题标题】：Cannot deselect radio button?无法取消选择单选按钮？
【发布时间】：2017-02-11 00:41:30
【问题描述】：

我一直在尝试允许使用 jQuery 取消选择单选按钮，但我遇到了 prop 函数的问题。当此代码运行时，我的条件 ($(e.currentTarget).prop('checked')) 始终评估为 true。

这是一个演示我的问题的小提琴：Jsfiddle

仅供参考：我使用的是 jQuery 1.8.2，我无法更新它，因为它是一个具有许多依赖项的遗留项目。此外，我必须根据客户的要求使用单选按钮。

Javascript：

$("input[name=optionMedia]").click(function(e) {
    if ($(e.currentTarget).prop('checked')) {
        $(e.currentTarget).prop('checked', false);
    }
});

HTML：

<input class="bigSizeInput" type="radio" id="audioVideo" name="optionMedia" value="1"/>
<input class="bigSizeInput" type="radio" id="showReel" name="optionMedia" value="2" />

【问题讨论】：

如果你想取消选中然后使用checbox的代替，radio类型不是为此目的。
作为对 Zakaria 评论的补充，单选按钮始终需要准确地选中 1。不是 0，不是 2。如果您希望能够选中 0，则应使用复选框，如果您希望在选中其他复选框时取消选中其他复选框，则通过 javascript 完成。
单选按钮不是为此目的而制作的，您正试图强制执行非规范行为 - 总是一个坏主意。必须始终选择一个选项。您将无法以任何一致的方式覆盖此行为。如果您需要能够取消选择，请改用复选框。
您需要向客户解释他们根本无法以这种方式工作，任何编程都无法改变这一点。单选按钮行为由 W3C 指定，并且 Web 客户端的开发遵循这些规范。你正试图强迫你的浏览器做一些它不适合做的事情。
这是你在jsfiddle.net/q7r9btbb之后的样子吗？

标签： javascript jquery html

【解决方案1】：

你可以这样做

$('input.bigSizeInput').mouseup(function() {
  if ($(this).is(':checked')) {
    setTimeout(function() {
      $('input.bigSizeInput:checked').prop('checked', false);
    }, 1)
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="bigSizeInput" type="radio" id="audioVideo" name="optionMedia" value="1" />
<input class="bigSizeInput" type="radio" id="showReel" name="optionMedia" value="2" />

【讨论】：

【解决方案2】：

这是因为 checked 是一个属性。如果它在那里它是真的，如果它不是它不是真的。因此，您应该切换到复选框或使用

$("..").removeProp('checked')

【讨论】：

【解决方案3】：

使用复选框来选中/取消选中比单选按钮更好。但是如果你想使用单选按钮，你需要检查单选是否被选中，使用复制它并删除复制元素的选中属性，然后将其插入到目标单选之后。最后删除原来的收音机。

$(document).on("mousedown", "input[name=optionMedia]", function(e) {
  if (this.checked)
    $(this).clone().prop('checked', false).insertAfter(this).end().remove();      
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<input class="bigSizeInput" type="radio" id="audioVideo" name="optionMedia" value="1"/>
<input class="bigSizeInput" type="radio" id="showReel" name="optionMedia" value="2" />

【讨论】：