Develop Reference

How do I convert a single select drop down to buttons in React/JS?

I had a drop-down for gender single-select: Male/Female
However, our designer wanted to spice it up and turn drop-down into buttons like this:
How can I implement these buttons in Javascript/React where clicking on one button highlights it and then it unhighlights the opposite button?

I learned that Bootstrap has this functionality as long as you include the data-toggle="buttons" in the top div.
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" name="options" autocomplete="off" checked> Option A
</label>
<label class="btn btn-primary">
<input type="checkbox" name="options" autocomplete="off"> Option B
</label>
<label class="btn btn-primary active">
<input type="checkbox" name="options" autocomplete="off" checked> Option C
</label>
</div>

Get attribute value with jQuery

I'm trying to get the attribute value in jQuery, but isn't working, My code reports undefined. Here is an example:
console.log($(".btn-causas input").find(".active input").attr('d'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="btn-group btn-causas" data-toggle="buttons">
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="security_alert">Security
</label>
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="strike">Strike
</label>
<label class="btn btn-info active">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="dontknow">I DON'T
</label>
</div>

The selector could be simply done like :
$(".btn-causas .active input").attr('d');
Hope this helps.
console.log( $(".btn-causas .active input").attr('d') );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group btn-causas" data-toggle="buttons">
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="security_alert"> Security
</label>
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="strike"> Strike
</label>
<label class="btn btn-info active">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="dontknow"> I DON'T
</label>
</div>

The best way to do that is that you rename the attribute d for data-name and you can get very easy that value with this code:
Html:
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" data-name="dontknow">
Jquery:
var value = $('input[name="options"]:checked').data('name');
alert(value);
This is the best way to do that, this code retrieve the value of a checked input radio with the attribute data-name
Regards!

You don't have active class but as per my understanding you are trying to get selected radio buttons' attribute so try :checked on input

You're specifying wrong selector .btn-causas input, instead use this .btn-causas, See the code below:
Make jQuery find the inputs inside div - .btn-causas instead of finding it inside inputs, as you've done. Inputs doesn't contains a child elements, so you can't find elements inside it.
$(function() {
console.log($(".btn-causas").find(".active input").attr('d'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group btn-causas" data-toggle="buttons">
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="security_alert"> Security
</label>
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="strike"> Strike
</label>
<label class="btn btn-info active">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="dontknow"> I DON'T
</label>
</div>
Hope this helps!

Setting hidden field value with bootstrap radion button

I am have some trouble with setting the value of a hiddenfield with a boostrap radio button. here is the button group with the radio buttons and the hiddenfield.
<div class="myRow">
<div class="smallCol">
<div class="btn-group hiddenRFIDValue" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" class="btn" name="options" id="alwaysRFID" autocomplete="off">
Always
</label>
<label class="btn btn-default">
<input type="radio" class="btn" name="options" id="neverRFID" autocomplete="off">
Never
</label>
<label class="btn btn-default">
<input type="radio" class="btn" name="options" id="sometimesRFID" autocomplete="off">
Sometimes
</label>
</div>
</div>
</div>
</div>
<asp:HiddenField ID="hiddenRFIDValue" runat="server" />
Here is the script that i am trying to set the value with.
<script>
$(".hiddenRFIDValue .btn").click(function () {
// whenever a button is clicked, set the hidden helper
$("#hiddenRFIDValue").val($(this).text());
});
</script>
Hope one of you can help with it. Thanks

I fixed it! when the html is generated it changed the id of the hidden field so the scipt needed to look like this.
<script>
$(".hiddenRFIDValue .btn").click(function () {
$("#MainContent_hiddenRFIDValue").val($(this).text());
});
</script>

AngularJS : binding radio buttons to ng-model with angular in ng-repeat

I'm currently learning angular.js and I'm running into a problem. I'm listing radio buttons based on the items fetched from the database and when I click on any of them my model doesn't get updated. I added an input to test and the input update the model right away.
Any idea what i'm missing?
Update: it appears that the problem comes from bootstrap and the span wrapping the radio buttons. If I remove the spans the model gets updated
<div ng-repeat="question in questionnaire">
<div class="btn-group col-xs-offset-1 col-xs-2 col-sm-2" data-toggle="buttons">
<span class="btn btn-primary">
<input type="radio" name="question{{$index}}" ng-model="formData[$index]" ng-value="false"> No
</span>
<span class="btn btn-primary">
<input type="radio" name="question{{$index}}" ng-model="formData[$index]" ng-value="true"> Yes
</span>
<input type="text" name="testEntry{{$index}}" ng-model="formData[$index]" />
</div>
{{formData}}
<span ng-bind="question.QuestionPhrase" class="message col-xs-8 col-sm-8"></span>
</div>

So it turns out that the problem was coming from the spans. I changed them to labels and it worked.
Here is the code:
<div ng-repeat="question in questionnaire">
<div class="btn-group col-xs-offset-1 col-xs-2 col-sm-2" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="question{{$index}}" ng-model="formData[$index]" value="false"> No
</label>
<label class="btn btn-primary">
<input type="radio" name="question{{$index}}" ng-model="formData[$index]" value="true"> Yes
</label>
</div>
{{formData}}
<span ng-bind="question.QuestionPhrase" class="message col-xs-8 col-sm-8"></span>
<br /><br /><br />
</div>

Bind Bootstrap Radio Button To Angular Property

I am having troubles getting a bootstrap radio box selection to bind into an angular property.
Here is what I have, it is not working.
HTML BOOTSTRAP
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success active">
<input type="radio" value="bill" ng-model="newItemType" name="options" id="option1" autocomplete="off" checked> Insert New Bill <span class="glyphicon glyphicon-file"></span>
</label>
<label" class="btn btn-success ">
<input type="radio" value="coin" ng-model="newItemType" name="options" id="option2" autocomplete="off"> Insert New Coin <span class="glyphicon glyphicon-adjust"></span>
</label>
</div>
ANGULAR JAVASCRIPT
var CurrencyInventoryBillController = function($scope, $http)
{
$scope.newItemType = "NOT SELECTED";
//TRIGGERED ON BUTTON CLICK. ALERT SHOWS 'NOT SELECTED' REGARDLESS OF WHICH RADIO BTN IS SELECTED
$scope.insertNewCurrencyItem = function()
{
alert($scope.newItemType);
}
}
Why is the VALUE and NG-MODEL directives not changing the SCOPE variable in this case?

I aborted trying to get the bindings to work, and went with another approach, changing the values in the angular scope via the ng-click method inline in the html
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success" ng-class="{'active':newItemType=='bill'}" ng-click="newItemType='bill'" >
<input type="radio"> Insert New Bill <span class="glyphicon glyphicon-file"></span>
</label>
<label class="btn btn-success" ng-class="{'active':newItemType=='coin'}" ng-click="newItemType='coin'" >
<input type="radio"> Insert New Coin <span class="glyphicon glyphicon-adjust"></span>
</label>
</div>
Notice the ng-click event sets the newItemType to coin or bill. This approach is imperfect, but it works for now until someone can figure out how to bind radio buttons.

Can you try this
$scope.newItemType = 'bill';
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success" ng-class="{'active':newItemType=='bill'}" >
<input type="radio" value="bill" ng-model="newItemType"> Insert New Bill <span class="glyphicon glyphicon-file"></span>
</label>
<label class="btn btn-success" ng-class="{'active':newItemType=='coin'}" >
<input type="radio" value="coin" ng-model="newItemType"> Insert New Coin <span class="glyphicon glyphicon-adjust"></span>
</label>
</div>
Update: Here is the link to a fiddle

var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success" ng-class="{'active':newItemType=='bill'}">
<input type="radio" value="bill" ng-model="newItemType" name="options">Insert New Bill <span class="glyphicon glyphicon-file"></span>
</label>
<label class="btn btn-success" ng-class="{'active':newItemType=='coin'}">
<input type="radio" value="coin" ng-model="newItemType" name="options">Insert New Coin <span class="glyphicon glyphicon-adjust"></span>
</label>
</div>
<br/>
{{newItemType}}
</div>
</div>
You have it you just have to change your class active to actually see it.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success" ng-class="{'active':newItemType=='bill'}">
<input type="radio" value="bill" ng-model="newItemType" name="options" id="option1" autocomplete="off" checked> Insert New Bill <span class="glyphicon glyphicon-file"></span>
</label>
<label class="btn btn-success" ng-class="{'active':newItemType=='coin'}">
<input type="radio" value="coin" ng-model="newItemType" name="options" id="option2" autocomplete="off"> Insert New Coin <span class="glyphicon glyphicon-adjust"></span>
</label>
</div>
<br/>
{{newItemType}}