第二次单击时取消选中单选按钮

Posted 2023-02-24

【中文标题】第二次单击时取消选中单选按钮

【英文标题】：Radio button uncheck on second click

【发布时间】：2013-11-22 14:08:00

【问题描述】：

我有很多单选按钮从我的数据库中获取一个值，如果它设置为“1”，我会选中单选按钮。

如果选中单选按钮，并且用户再次单击它，我仍然希望能够清除此按钮。有人有想法吗？

$radio1 从数据库中获取数据，为 0、1 或 2

<input value="1" name="radio1" type="radio"<?php if($radio1==1)echo " checked"; ?>>
<input value="2" name="radio2" type="radio"<?php if($radio1==2)echo " checked"; ?>>

Varun Malhotra 的回答稍作修改： 我更改了两行对我来说效果更好的代码。但总的来说，Varun 的回答是完美的！

$('input[type="radio"]').click(function()
    var $radio = $(this);

    // if this was previously checked
    if ($radio.data('waschecked') == true)
    
        $radio.prop('checked', false);
        $radio.data('waschecked', false);
    
    else
    
         $radio.prop('checked', true);
         $radio.data('waschecked', true);
    

    // remove was checked from other radios
    $radio.siblings('input[type="radio"]').data('waschecked', false);
);

【问题讨论】：

这听起来更像是你想要一个复选框。

@Amber 我想要一个单选按钮，因为我不希望用户选择多个选项。

然后考虑为“以上都不是”添加另一个单选按钮。

@Amber 出于造型目的，这不是我的选择。它需要在第二次点击。我不能再添加单选按钮了。

clear this button 是什么意思？删除什么？

【参考方案1】：

我建议添加一个自定义属性来跟踪每个收音机的先前状态，如下所示：

$(function()
    $('input[name="rad"]').click(function()
        var $radio = $(this);

        // if this was previously checked
        if ($radio.data('waschecked') == true)
        
            $radio.prop('checked', false);
            $radio.data('waschecked', false);
        
        else
            $radio.data('waschecked', true);

        // remove was checked from other radios
        $radio.siblings('input[name="rad"]').data('waschecked', false);
    );
);

您还需要将此属性添加到最初检查的单选标记中

<input type="radio" name="rad" id="Radio0" checked="checked" data-waschecked="true" />

JSFIDDLE DEMO

更新：

 $(function()
        $('input[name="rad"]').click(function()
            var $radio = $(this);

            // if this was previously checked
            if ($radio.data('waschecked') == true)
            
                $radio.prop('checked', false);
                $radio.data('waschecked', false);
            
            else
                $radio.data('waschecked', true);

            // remove was checked from other radios
            $radio.siblings('input[type="radio"]').data('waschecked', false);
        );
    );

但请确保您没有其他单选组可以使用，否则您必须提供一些属性来指定这些按钮，例如我之前关注的 name prop。

【讨论】：

我是否有理由需要跟踪以前的状态？这也是一个很好的例子！但是，如果我有 30 个广播组怎么办。必须有一种更简单的方法，而不是全部命名

为了方便起见，您可以删除 name 道具，但您必须有一些东西来引用特定的单选按钮。所以命名一个单选按钮是最常见的方式。您只需提供相同的名称。如果您希望所有人都有不同的 id，那将是我认为最糟糕的情况。

谢谢瓦伦！那么我是否必须为我拥有的每个单选按钮提供单独的点击功能？在这个项目结束时，我将有大约 100 个。另外，我会像往常一样将它转移到数据库吗？

我最终改用$('input[type="radio"]').click，结果效果非常好。让我知道这是否会导致问题，但到目前为止一切都很好。

我认为这不会造成任何问题。您甚至可以通过在 $('input[type="radio"]').click 函数中简单地引用 this 来访问任何其他属性。 this 将为您提供被单击的特定单选按钮，以便您可以进行进一步的转换。不满意请留言。

【参考方案2】：

这应该比其他解决方案更普遍，因为它可以处理所有无线电不在同一个父级的情况。

var $radios = $('input[type="radio"]');
$radios.click(function () 
  var $this = $(this);
  if ($this.data('checked')) 
    this.checked = false;
  
  var $otherRadios = $radios.not($this).filter('[name="'
                                               + $this.attr('name') + '"]');
  $otherRadios.prop('checked', false).data('checked', false);
  $this.data('checked', this.checked);
);

【讨论】：

让我明白了过滤函数不必传入索引、元素函数语法就能工作，从长远来看，这将使我的代码更短、更高效。跨度>

【参考方案3】：

当您第一次点击时，Change 事件在点击之前触发。你可以使用它们。与许多单选组一起工作，即使您已经预先检查了单选按钮。

$("input[type=radio]").each(function() 
    var secondClick = true;
    $(this).change(function() 
        secondClick = false;
    );
    $(this).click(function() 
        if (secondClick) 
            $(this).prop("checked", false);
        
        secondClick = true;
    );
);

JSFIDDLE DEMO

【参考方案4】：

试试这个

 $('input[name="rad"]').click(function()
                    var $radio = $(this);
                    // if this was previously checked
                    if ($radio.data('waschecked') == true)
                    
                        $radio.prop('checked', false);
                        $radio.data('waschecked', false);
                    
                    else
                        $radio.data('waschecked', true);
                    
                    // remove was checked from other radios
                    $('input[name="rad"]').not($(this)).data('waschecked', false);
                );

【参考方案5】：

$("input[type=radio]").on('click', function () 
    if ($(this).is(':checked')) 
        $(this).prop("checked", false);
     else 
        $(this).prop("checked", true);
    
);

【讨论】：

这似乎是最合理和合乎逻辑的方法，但我有一组单选按钮不起作用。

【参考方案6】：

这是我的解决方案，它适用于触摸设备以及鼠标点击：

$('input[type=radio]').bind('touchstart mousedown', function() 
    this.checked = !this.checked
).bind('click touchend', function(e) 
    e.preventDefault()
);

https://codepen.io/robbiebow/pen/bjPvEO

【参考方案7】：

我不知道具体原因，但是用户 softvar 选择的答案对我不起作用，所以经过大约两个小时的尝试，我根据 softvar 的答案提出了以下内容。把它放在这里以防它可以帮助别人。您可以根据从数据库中获得的“选定”值将 html 中的“数据活动”指定为 0 或 1。

<input type="radio" name="user" value="1" data-active="0"> User 1
<input type="radio" name="user" value="2" data-active="0"> User 2

和

$('input[name="user"]').on('click', function() 
    if ($(this).data('active') == 0) 
        $('input[name="user"]').data('active', 0);
        $(this).data('active', 1);
     else 
        $(this).data('active', 0);
        $(this).prop('checked', false);
    
);