我有取消选中单选按钮的代码,但问题是,当单选按钮被选中时,它不会在一次单击中发生,我从mysql中获取单选按钮的值,因此单选按钮的默认值被选中,当我单击单选按钮时,该值应该在单击后取消选中,但我的代码使其在双击时发生。我如何使其在单击时发生?
var check;
$('input[type="radio"]').hover(function() {
check = $(this).is(':checked');
});
var checkedradio;
function docheck(thisradio) {
if (checkedradio == thisradio) {
thisradio.checked = false;
checkedradio = null;
}
else {checkedradio = thisradio;}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="check" value="check" onClick="javascript:docheck(this);" checked="checked"/>
2条答案
按热度按时间gwbalxhn1#
收音机的设计是为了在一个组中使用(https://html.spec.whatwg.org/multipage/input.html#radio-button-state-(type=radio))-一组2个或更多的收音机应该形成一个组,以允许用户从该组中的选择中选择一个值。根据设计,收音机组的行为是这样的-一旦做出选择(无论是由用户还是通过编程),该选择就会坚持,并且除了从组中选择另一个收音机选项之外,没有办法撤消它。你会在你的例子中看到,如果没有JavaScript位,如果默认取消选中收音机,然后手动选中它,你将无法再次取消选中它。这就是它应该如何工作的。
经验法则应该是,在后端解决问题不应该以牺牲前端为代价,因为它会对用户体验产生负面影响,并会给用户带来问题。如果您出于任何原因不得不坚持使用这样一个糟糕的UX解决方案,这里有一种方法可以破解您的收音机,让它像复选框一样,但它是严重不建议的,你应该改变你的后端使用复选框代替。
以下是无线电黑客(以及应该使用的本地复选框输入):
你会看到jQuery选择器被故意设置为只选择“选中”的单选框,所以JavaScript解决方案只在默认选中单选框的情况下接管本机行为。一旦默认不选中单选框,你会看到浏览器如何在手动选中单选框时强制选择-这是一个告诉你试图偏离预期行为的信号。
您还将看到复选框本身就可以工作--不需要JavaScript或jQuery。
qlzsbp2j2#
RobertP提出了一个关于用户体验的有趣观点,或者在IT谈话中:“UX”。在某些情况下,必须单击单个选项 *。这正是单选按钮的用途。然而,我遇到过一些情况,其中还应该提供“无”选项。对于这些情况,您可以简单地提供一个额外的单选按钮,并选择“无”,或者您可以再次使单选按钮“不可选”。这似乎违背了预期的单选按钮行为。然而,既然可以从“没有”单选按钮被选中开始,为什么在用户过早地点击了一个项目之后,“没有”可能返回到这种状态呢?
因此,考虑到这些因素,我继续进行,并将OP所考虑的方法放在一起。我通过包含更多的单选按钮选项对示例进行了一点扩展:
在
.each()
循环中,我收集了所有选中单选按钮的初始选中状态,并将每个单选按钮的选中状态存储在数据属性“flag”中。然后,
click
事件处理程序函数拾取此数据标志,并通过 * 或者 * 从当前元素中删除选中状态 * 或者 * 简单地重置整个组的标志数据属性来决定是否单步执行操作(其特征在于具有与当前点击的一个相同的name
)。在最后一个操作中,它然后再次反转当前元素的标志状态。由于所有data
属性都存储为字符串,因此值1
和“”是可以直接测试的“truthy”和“falsy”值。这会导致您正在寻找的行为。我希望;- )
通过将功能打包在一个小的jQuery插件中,它现在可以直接应用于任何jQuery对象。