jquery - 更改Label.BTN的颜色

This question already has answers here:

jQuery Click fires twice when clicking on label
                                
                                    （14个回答）
                                
                        
                                在11个月前关闭。
            
                    
我正在使用bootstrap3＆fontawesome。我有以下HTML：

<label for="foo" class='radio btn'>
    <input type="radio" id='foo' name='foo[]'>
    <span></span>
    Foo
</label>

使用后续CSS：

label.radio {background: #e8e8e8;font-size: 25px;text-align: center;width: 100%;padding-top: 30px;padding-bottom: 30px;}
label.radio.active {background:#f00;}
label.radio > input {display: none;}
label.radio > input+span:after {font-family: FontAwesome;content:"\f00d";}
label.radio > input:checked+span:after {font-family: FontAwesome;content:"\f00c";}

但是，我想在单击标签时更改标签的背景。我看不到用CSS做到这一点的方法，所以我尝试了jQuery：

$("label.radio").click(function (evt) {
    $(this).toggleClass("active")
})

但是click()函数会触发两次。

我该如何实现？

最佳答案

您可以使用复选框更改事件来更改标签的颜色。

<label for="foo" id="fooLabel" class='radio btn'>
    <input type="radio" id='foo' name='foo[]'>
    <span></span>
    Foo
</label>

$('#foo').change(function() {
     $('#fooLabel').toggleClass("active")
});

关于jquery - 更改Label.BTN的颜色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54946102/