切换按钮充当单选按钮

Toggle button act as radio issue

本文关键字：单选按钮 按钮      更新时间：2023-09-26

我正在尝试创建一个按钮，该按钮将充当无线电输入。意味着如果有许多按钮，则一次只能选择一个。

但就我创建而言，所有按钮现在都可以一次选择。我无法像收音机一样工作.我的意思是只有一个按钮.如果选择一个，则应关闭另一个。

任何帮助将不胜感激。

这是我到目前为止所做的js小提琴链接：http://jsfiddle.net/saifrahu28/eQ744/1/

.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>

.CSS

 .toggleButtonRadio , .toggleButton {
  background: #e1e1e1; 
  text-decoration: none;
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
  font-size: .769em;
  font-weight: 900;
  color: #454545;
  text-transform: uppercase;
   text-decoration: none;
  padding: 5px 10px;
  -webkit-border-radius: 15px;
   border-radius: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(64, 64, 64, .5);
  box-shadow: 0px 0px 3px 0px rgba(64, 64, 64, .5);
  }
  .toggleButtonRadio:hover, .toggleButton:hover{
    background:#d4d4d4;
   }
  .toggleButtonRadio.active , .toggleButton.active{
   background:#90bf00;
   color:#fff;
   }
   .active:hover{
   background:#7ca600;
   }

.JS

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

});

在 ToggleClass 之前添加以下内容：

$('.toggleButtonRadio').removeClass("active");

演示 ： http://jsfiddle.net/pleasedontbelong/RxXvg/

从其他按钮中删除active类，并将类添加到当前按钮

var $bts = $('.toggleButtonRadio').click(function () {
    $bts.removeClass('active');
    $(this).addClass("active");
});

演示：小提琴

相关文章：