[英]Toggle button act as radio issue
我正在嘗試創建一個按鈕,將其用作無線電輸入。 意味着如果有很多按鈕,一次只能選擇一個。
但是到目前為止,我創建的所有按鈕現在都可以一次選擇。 我無法像收音機那樣使它工作。 我的意思是只有一個按鈕。 如果選擇了另一個,則應將其關閉。
任何幫助將不勝感激 。
這是我到目前為止所做的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");
從其他按鈕中刪除active
類,並將該類添加到當前按鈕
var $bts = $('.toggleButtonRadio').click(function () {
$bts.removeClass('active');
$(this).addClass("active");
});
演示: 小提琴
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.