javascript 我如何取消选中单选按钮在一个点击

oewdyzsn  于 2023-04-10  发布在  Java
关注(0)|答案(2)|浏览(141)

我有取消选中单选按钮的代码,但问题是,当单选按钮被选中时,它不会在一次单击中发生,我从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"/>
gwbalxhn

gwbalxhn1#

收音机的设计是为了在一个组中使用(https://html.spec.whatwg.org/multipage/input.html#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。

qlzsbp2j

qlzsbp2j2#

RobertP提出了一个关于用户体验的有趣观点,或者在IT谈话中:“UX”。在某些情况下,必须单击单个选项 *。这正是单选按钮的用途。然而,我遇到过一些情况,其中还应该提供“无”选项。对于这些情况,您可以简单地提供一个额外的单选按钮,并选择“无”,或者您可以再次使单选按钮“不可选”。这似乎违背了预期的单选按钮行为。然而,既然可以从“没有”单选按钮被选中开始,为什么在用户过早地点击了一个项目之后,“没有”可能返回到这种状态呢?
因此,考虑到这些因素,我继续进行,并将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和“”是可以直接测试的“truthy”和“falsy”值。
这会导致您正在寻找的行为。我希望;- )
通过将功能打包在一个小的jQuery插件中,它现在可以直接应用于任何jQuery对象。

相关问题