CODEWITHSUNDEEP
javascriptjquery
S Raihan
S Raihan

Reputation: 387

Toggle button act as radio issue

I am trying to create a button which will act as a radio input . Means if there are many buttons only one can be selected at a time .

But as far I created all buttons are now select-able at a time. I am not able to make how to work this like a radio . I mean only one button . If one is selected other one should be turn off .

any help will be appreciated .

Here is the js fiddle link of what I made till now: 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");


});

Upvotes: 0

Views: 92

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

Remove the active class from other buttons, and add the class to current button

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

Demo: Fiddle

Upvotes: 2

pleasedontbelong
pleasedontbelong

Reputation: 20102

Add this before the ToggleClass:

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

Demo : http://jsfiddle.net/pleasedontbelong/RxXvg/

Upvotes: 2

Related Questions