8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

如何单击一次取消选中单选按钮

Andrei Popa 1月前

35 0

我有取消选中单选按钮的代码,但问题是,当选中单选按钮时,它不会在一次单击中发生,我正在从 mysql 中获取选中的单选按钮的值,因此 d...

我有取消选中单选按钮的代码,但问题是,选中单选按钮后,单击一次不会取消选中,我从 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"/>
帖子版权声明 1、本帖标题:如何单击一次取消选中单选按钮
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Andrei Popa在本站《spring-mvc》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 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 对象。

返回
作者最近主题: