如何一次单击取消选中单选按钮
我有取消选中单选按钮的代码，但问题是，当单选按钮被选中时，它不会在一次单击中发生，我正在从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
Stack Overflow用户
发布于 2021-04-05 17:38:02
无线电的设计意味着要在一个组中使用(https://html.spec.whatwg.org/#radio-button-state-(type=radio) -2个或更多无线电的组应该形成一个组，以允许用户从该组中的选择中选择一个值。通过设计，无线电群组行为是这样的-一旦做出选择(由用户或编程)，该选择就会生效，并且除了从群组中选择另一个无线电选项之外，没有办法撤销它。您将在您的示例中看到，如果没有JavaScript位，如果您默认取消选中无线电，然后手动选中它，您将无法再次取消选中它。这就是它的工作原理。
经验法则应该是，在后端解决问题不应该以牺牲前端为代价，因为这会对用户体验产生负面影响，并会给用户带来问题。如果你因为任何原因不得不坚持使用如此糟糕的UX解决方案，这里有一种方法可以让你的无线电表现得像一个复选框，但这是严重不被建议的，你应该改变你的后端来使用复选框。
以下是无线电攻击(以及应该使用的原生复选框输入)：
var myRadio = $('input[type="radio"]:checked');
myRadio.on('click', function() {
if (myRadio.attr('checked')) {
myRadio.removeAttr('checked');
myRadio.prop('checked', false);
} else {
myRadio.attr('checked', 'checked');
myRadio.prop('checked', true);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<b>This works, but it's bad UX, so avoid!</b><br>
<input type="radio" name="check" value="check" checked />
<hr>
<b>Use this instead!</b>
<br>
<input type="checkbox" name="real-check" value="real-check" checked />
您将看到jQuery选择器被故意设置为只选择“选中的”无线电，因此JavaScript解决方案只有在默认选中无线电的情况下才接管本机行为。一旦无线电在默认情况下没有被选中，你就会看到浏览器在手动选中后是如何强制你的选择的-这是一个很明显的迹象，表明你试图偏离预期的行为。
您还将看到该复选框在本地工作-不需要JavaScript或jQuery。
Stack Overflow用户
发布于 2021-04-05 19:05:42
RobertP提出了一个关于用户体验的有趣观点，或者在IT谈话中："UX“。在某些情况下，必须单击单个选项。这正是制作单选按钮的目的。然而，我遇到过一些情况，其中也应该提供“无”选项。对于这些情况，您可以简单地提供一个带有"none“选项的额外单选按钮，或者您可以再次使这些单选按钮”不可选“。这似乎与预期的单选按钮行为相违背。然而，既然可以在没有选择单选按钮的情况下开始，那么为什么不能在用户过早地单击项目之后返回到这种状态呢？
因此，考虑到这些考虑，我继续前进，并制定了一种方法来完成OP的想法。我通过添加更多的单选按钮选项对示例进行了扩展：
$.fn.RBuncheckable=function(){ // simple jQuery plugin
const rb=this.filter('input[type=radio]'); // apply only on radio buttons ...
rb.each(function(){this.dataset.flag=$(this).is(':checked')?1:''})
.on('click',function(){
if (this.dataset.flag) $(this).prop('checked',false) // uncheck current
// mark whole group (characterised by same name) as unchecked:
else rb.filter('[name='+this.name+']').each(function(){this.dataset.flag=''});
this.dataset.flag=this.dataset.flag?'':1; // invert flag for current
});
return this;
}
$('input').RBuncheckable(); // apply it to all radio buttons on this page ...<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4>Two groups of radio buttons with "uncheck" option:</h4>
<input type="text" value="This input field is unaffected">
<p>group one:</p>
<label><input type="radio" name="check" value="a" checked /> Option A</label><br>
<label><input type="radio" name="check" value="b"/> Option B</label><br>
<label><input type="radio" name="check" value="c"/> Option C</label>
<p>group two:</p>
<label><input type="radio" name="second" value="d"/> Option D</label><br>
<label><input type="radio" name="second" value="e"/> Option E</label><br>
<label><input type="radio" name="second" value="f" checked/> Option F</label>
在.each()循环中，我收集所有选中的单选按钮的初始选中状态。我将单个选中状态存储在每个单选按钮的数据属性"flag“中。
然后，click事件处理函数拾取该数据标志，并决定是通过从当前元素移除选中状态还是简单地重置整个组的标志数据属性(其特征在于具有与当前点击的name相同的属性)来采取行动。在最后一个操作中，它再次反转当前元素的标志状态。由于所有data属性都存储为字符串，因此值1和"“是可以直接测试的”真“和”假“值。
这就产生了你想要的行为。我希望;-)
通过将该功能打包到一个小的jQuery插件中，它现在可以直接应用于任何jQuery对象。
https://stackoverflow.com/questions/66950124
复制相似问题
腾讯云开发者
