Javascript 单选切换按钮问题

我有一个单选类型的切换按钮。有三个按钮和一次只选择一个按钮的选项。但问题是按钮总是保持选中状态（我知道单选按钮没有取消选中的选项）。没有取消选中全部的选项

我想这样做：

如果再次单击任何选定按钮，则将取消选中该按钮。但如果不点击所选按钮，它的工作原理与当前按钮相同

这可能吗？对不起，英语不好

以下是演示链接：

HTML

<div style="margin:0px auto; margin-top:100px; width:960px;">
    <a href="#">
        <span class="toggleButtonRadio normal">toggle Radio button</span>
    </a>


    <a href="#">
        <span class="toggleButtonRadio normal">toggle Radio button</span>
    </a>


    <a href="#">
        <span class="toggleButtonRadio normal">toggle Radio button</span>
    </a>
</div>

js

$('.toggleButtonRadio').click(function(){
    $('.toggleButtonRadio').removeClass("active");      
    $(this).toggleClass("active");


    });

这应该可以满足您的需要，因为它会删除所有同级上的

活动的
类（因此
.not（This）
）。然后单击按钮的
活动的
类被打开或关闭

编辑：将
$（this）
更改为
this
，更简单

这应该可以满足您的需要，因为它会删除所有同级上的
活动的
类（因此
.not（This）
）。然后单击按钮的
活动的
类被打开或关闭

编辑：将
$（this）
更改为
this
，更简单。
我已经用一个简单的IF-ELSE语句解决了您的问题：

JQuery

$('.toggleButtonRadio').click(function () {
    if ($(this).hasClass('active')) {
        $(this).removeClass("active");
    } else {
        $('.toggleButtonRadio').removeClass("active");
        $(this).addClass("active");
    }
});

我用一个简单的IF-ELSE语句解决了您的问题：

JQuery

$('.toggleButtonRadio').click(function () {
    if ($(this).hasClass('active')) {
        $(this).removeClass("active");
    } else {
        $('.toggleButtonRadio').removeClass("active");
        $(this).addClass("active");
    }
});

为什么不使用实际的HTML单选按钮（即，
）？这是它们的默认行为。添加第四个单选按钮并将其称为“以上任何一个”。为什么不使用实际的HTML单选按钮（即，
）？这是它们的默认行为。添加第四个单选按钮并将其称为“以上任何一个”。我有相同的解决方案并将其删除-Jamie Read首先使用正确的解决方案。：-）我有相同的解决方案并将其删除-Jamie Read首先使用正确的解决方案。：-）谢谢@Palatiner:）这很简单。我对JQuery和Js缺乏了解。谢谢分享，不客气！当我发现
。而不是（…）
，我想：“我早就需要这个了！”谢谢@Palatiner:）这很简单。我对JQuery和Js缺乏了解。谢谢分享，不客气！当我发现
。而不是（…）
时，我想：“我早就需要这个了！”
$('.toggleButtonRadio').click(function () {
    if ($(this).hasClass('active')) {
        $(this).removeClass("active");
    } else {
        $('.toggleButtonRadio').removeClass("active");
        $(this).addClass("active");
    }
});