取消选择单选选项

Posted 2023-03-10

【中文标题】取消选择单选选项

【英文标题】：Deselect a radio option

【发布时间】：2016-02-27 00:03:42

【问题描述】：

我正在使用bootstrap radio buttons 并希望允许取消选择无线电组。这可以使用额外的按钮(Fiddle) 来完成。但是，如果在该选项处于活动状态时单击该选项，我想取消选择一个选定的单选选项，而不是一个额外的按钮。

我试过了

$(".btn-group label").on("click", function(e)  

    var clickedLabel = $(this);

        if ($(clickedLabel).hasClass("active"))
        
            // an active option was clicked => deselect it
            $(clickedLabel).children("input:radio").prop("checked", false)
            $(clickedLabel).removeClass("active");
        
    
)

但似乎存在竞争条件：bootstrap.js 似乎使用单击我使用的标签的事件将单击的标签选项设置为“活动”。如果我引入超时，则“活动”类被成功删除：

$(".btn-group label").on("click", function(e)  

    var clickedLabel = $(this);

        if ($(clickedLabel).hasClass("active"))
        
            setTimeout(function() 
                // an active option was clicked => deselect it
                $(clickedLabel).children("input:radio").prop("checked", false)
                $(clickedLabel).removeClass("active");
            , 500)
        
    
)

如何在不使用超时的情况下成功切换所选选项？谢谢你的帮助。

【问题讨论】：

见***.com/questions/17120576/…

克里斯，这适用于常规单选按钮，不适用于引导按钮（它们在输入周围有标签）。

【参考方案1】：

不要使用两种方法的 preventDefault 和 stopPropagation，而是使用 return false，效果相同。

不同的是return false；让事情更进一步 它还可以防止该事件传播（或“冒泡”） DOM。你可能不知道这一点是，每当一个事件 发生在一个元素上，该事件在每个父级上触发 元素也是如此。

$(".btn-group label").on("click", function(e)  

    var clickedLabel = $(this);



          if ($(clickedLabel).hasClass("active"))
            
                // an active option was clicked => deselect it
                $(clickedLabel).children("input:radio").prop("checked", false)
                $(clickedLabel).removeClass("active");
                return false;
            
        );

【讨论】：

这个解决方案比我的好很多。使用 return 完全让我忘记了。

【参考方案2】：

在 jsfiddle 中弄乱了你的代码一段时间后，我发现 preventDefault() 和 stopPropagation() 的组合可以解决问题。

这是fiddle

和代码：

$(".btn-group label").on("click", function(e)  

    var clickedLabel = $(this);

        if ($(clickedLabel).hasClass("active"))
        
            // an active option was clicked => deselect it
            $(clickedLabel).children("input:radio").prop("checked", false)
            $(clickedLabel).removeClass("active");
            e.preventDefault();
            e.stopPropagation();
        
    
);

【讨论】：

preventDefault & stopPropagation - 太好了，谢谢 ;o)

@peter 谢谢很高兴我能帮上忙！然而，Jhon Carpenter 有一个比我更好的解决方案，我认为应该被接受。