CODEWITHSUNDEEP
jqueryangularjsradio-button
Mark Gerryl Mirandilla
Mark Gerryl Mirandilla

Reputation: 823

Check radio button on button click

I'm working on a button which has a radio button inside what I'm trying to do is when I clicked the button the radio inside will be checked , so that I can get the value I choose. Also I like it to do on angular way.

hope you help me thanks.

.role-tab-radio{
  width: 30%;
  margin: auto;
  margin-top: 20px;
}
.role-tab-radio .btn{
    border: 1px solid #FF5959;
    color: #FF5959;
    background-color: #FFF;
    transition: .3s ease-in-out;
    width: 49%;
    display: inline-block;
}
.role-tab-radio .btn:hover{
    opacity: 1 !important;
}

.role-tab-radio .btn.active,
.role-tab-radio .btn:active{
    box-shadow: none;
    background-color: #2A363B;
    color: #FFF;
    outline: 0;
    border: 1px solid #2A363B;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<form ng-app="">
  
  <div data-toggle="buttons" class="role-tab-radio">
          <button class="btn btn-default"><input type="radio" name="q1" value="0">Black</button>
          <button class="btn btn-default"><input type="radio" name="q1" value="1">White</button>
        </div>

</form>

Upvotes: 0

Views: 55

Answers (1)

holydragon
holydragon

Reputation: 6728

Try this:

In the html file:

<div class="role-tab-radio">
   <button class="btn btn-default" ng-click="chooseColor(0)">Black</button>
   <button class="btn btn-default" ng-click="chooseColor(1)>White</button>
</div>

In the Controller:

$scope.chooseColor = function(value){
    console.log(value);
}

What it does is that when the user clicks on one of the buttons, it will trigger chooseColor function, which will console.log out the value that is assigned in the button.

As a result, you should get 0 from clicking the Black button and get 1 from clicking White button.

Upvotes: 2

Related Questions