取消选择收音机选项 [英] Deselect a radio option

问题描述

我正在使用引导程序单选按钮，并希望允许取消选择收音机组。这可以使用额外的按钮来完成。但是，如果在激活时单击该选项，我想取消选择一个选定的广播选项，而不是一个额外的按钮。

我试过这个

  $（。btn-group label）。on（click，function（e）{
 
 var clickedLabel = $（this）; 
 
 if（$（clickedLabel）.hasClass（active））
 {
 //一个活动选项被点击=>取消选择它
 $（clickedLabel）.children（input：radio）。prop（checked，false）
 $（clickedLabel）.removeClass（active）; 
} 
} 
）
  

但似乎存在竞争条件：点击我使用的标签似乎被bootstrap.js用于将点击标签选项设置为活动。如果我引入一个超时，那么类active会被成功移除：

  $（。btn-group label）。 on（click，function（e）{
 
 var clickedLabel = $（this）; 
 
 if（$（clickedLabel）.hasClass（active））
 {
 setTimeout（function（）{
 //一个活动选项被点击=>取消选择
 $（clickedLabel）.children（input：radio）。prop check，false）
 $（clickedLabel）.removeClass（active）; 
}，500）
} 
} 
）
  

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

解决方案

不使用两种方法的preventDefault& stopPropagation，使用return false，会起作用。

区别在于返回false;在
中进一步取得了进一步的成果，它也阻止了该事件传播（或冒泡）
DOM。你可能不知道这一点是，每当元素发生一个事件
时，该事件也在每一个父元素
元素上触发。

  $（。btn-group label）。on（click，function（e）{
 
 var clickedLabel = $（this）; 
 
 
 
 if（$（clickedLabel）.hasClass（active））
 {
 （clickedLabel）.children（input：radio）。prop（checked，false）
 $（clickedLabel）.removeClass（活动）; 
返回false; 
} 
}）; 
  

I'm using the bootstrap radio buttons and would like to allow deselection of a radio group. This can be done using an extra button (Fiddle). Instead of an extra button, however, I would like to deselect a selected radio option if the option is clicked when it's active.

I have tried this

$(".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");
        }
    }
)

but there seems to be a race condition: the event of clicking the label that I use seems to be used by bootstrap.js to set the clicked label option to "active". If I introduce a timeout, the class "active" is removed successfully:

$(".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)
        }
    }
)

How can I toggle a selected option successfully without using a timeout?? Thank you for help.

解决方案

Instead of using two method's preventDefault & stopPropagation, use return false, will work same.

The difference is that return false; takes things a bit further in that it also prevents that event from propagating (or "bubbling up") the DOM. The you-may-not-know-this bit is that whenever an event happens on an element, that event is triggered on every single parent element as well.

$(".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;
            }
        });

这篇关于取消选择收音机选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！