Radio Toggle Button问题
我有一个收音机类型切换按钮。 有三个按钮和选项，一次只能选择一个按钮。 但问题是按钮始终保持选中状态（我知道单选按钮没有取消选中的选项）。 没有选项可以取消选中所有。
我想做这样的事情：
如果再次单击任何选定的按钮，它将取消选中。 但如果没有单击所选按钮，它将与当前按钮相同。
这有可能吗？ 抱歉英语不好
这是Demo链接： Js Fiddle
HTML
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"); });
这应该做你想要的，因为它删除了所有兄弟.not(this)上的active类（因此.not(this) 。然后单击按钮的active类切换为或。
编辑：将$(this)更改this ，更简单。
我用一个简单的IF ELSE语句解决了你的问题：
JQuery的
$('.toggleButtonRadio').click(function () { if ($(this).hasClass('active')) { $(this).removeClass("active"); } else { $('.toggleButtonRadio').removeClass("active"); $(this).addClass("active"); } });