单选按钮切换问题 [英] Radio Toggle Button Issue
问题描述
我有一个单选按钮.有三个按钮,并且一次只能选择一个按钮的选项.但是问题是按钮始终保持选中状态(我知道单选按钮没有取消选中的选项).没有全部取消选中"的选项.
I have a radio type Toggle buttons. There are Three buttons and option to select only one button at a time. But the problem is buttons always remain selected(I know radio button don't have option to unchecked ). There is no Option to Unchecked all.
我想做这样的事情:
如果再次单击任何选定的按钮,它将取消选中.但是,如果不单击所选按钮,它将与当前按钮相同.
If any selected button clicked again it will Unchecked . But if not clicked on the selected button it will work same what it is in current.
这有可能吗?对不起,英语不好
Is this possible to make? Sorry for bad English
这里是演示链接: Js Fiddle
Here is Demo link: Js Fiddle
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
* {
margin: 0;
padding: 0;
border: 0px;
}
body {
background: #fafafa;
font-family: Helvetica, Arial, sans-serif;
font-size: 0.813em;
color:#333333;
}
a {color:#737373;text-decoration:none;
}
a:link { text-decoration: none;outline: none;
}
a:visited {text-decoration: none;
}
a:hover {color:#454545;
}
a:active {text-decoration: none;
}
ul {list-style: none; text-decoration: none;
}
ol {list-style-position: inside; color:#333333;padding:12px 10px 25px 15px;font-size: 1.07em;}
ol, li {padding-bottom:8px;}
img {}
em {color: #737373; font-weight:300;}
h1 {color: #737378; margin:20px 5px 20px 0px; font-size:2.4em; text-transform:uppercase;letter-spacing:1px; font-weight:100; text-shadow:1px 1px 1px #fff; }
h2 {color: #454545; margin:10px 5px 0px 0px;}
h3 {color: #454545; margin:10px 5px 0px 0px;}
h4 {color: #454545; margin:10px 5px 20px 0px; font-size:1.2em; width:98%; border-bottom:1px solid #eee;padding-bottom:10px;}
h5 {color: #454545; margin:10px 5px 0px 0px;}
h6 {color: #454545; margin:10px 5px 0px 0px;}
p { color:#333; font-size:1.154em; margin:5px 10px 10px 0px; padding-bottom:10px;line-height:140%;}
hr { border: 0; clear: both; display: block; width: 100%; background-color: #bbbbbb; height: 1px; margin: 5px 0px;
}
select {
color: #454545;
}
.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(){
$('.toggleButtonRadio').removeClass("active");
$(this).toggleClass("active");
});
推荐答案
$('.toggleButtonRadio').click(function(){
$('.toggleButtonRadio').not(this).removeClass("active");
$(this).toggleClass("active");
});
这应该做您想做的,因为它会删除所有同级上的active
类(因此是.not(this)
.然后,单击或关闭按钮的active
类.
This should do what you want, since it removes the active
class on all siblings (hence the .not(this)
. Then the clicked button's active
class is toggled on or of.
将$(this)
更改为this
,更简单.
这篇关于单选按钮切换问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!