Fulcrum- Radio Button Group

by epinapala

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<form>
    <div class="row">
        <div class="col-sm-3">Test 1 - Bootstrap</div>
        <div class="col-sm-9">
            <div class="btn-group-vertical" data-toggle="buttons">
                <label class="btn btn-default">
                    <input type="radio" data-type="Hosted" data-scopepolicy="1stParty" name="ebay-web" class="app-type" />eBay Web Application</label>
                <label class="btn btn-default">
                    <input type="radio" data-type="Device" data-scopepolicy="1stParty" name="ebay-mobile" class="app-type" />eBay Mobile Application</label>
                <label class="btn btn-default">
                    <input type="radio" data-type="JavaScript" data-scopepolicy="1stParty" name="ebay-ui-widget" class="app-type" />eBay UI Widget</label>
                <label class="btn btn-default">
                    <input type="radio" data-type="Hosted" data-scopepolicy="2ndParty" name="second-party-web" class="app-type" />Second Party Web Application</label>
                <label class="btn btn-default">
                    <input type="radio" data-type="Hosted" data-scopepolicy="3rdParty" name="external-web" class="app-type" />External Web Application</label>
                <label class="btn btn-default">
                    <input type="radio" data-type="Hosted" data-scopepolicy="LegacyPartner" name="legacy-web" class="app-type" />Legacy Web Application</label>
                <label class="btn btn-default">
                    <input type="radio" data-type="Hosted" data-scopepolicy="VendorCS" name="cs-app" class="app-type" />Customer Service Application</label>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">Test 2 - No Bootstrap</div>
...

JavaScript

$(".app-type").change( function() {
    alert($(this).attr('data-scopepolicy') + " : " + $(this).attr('data-type'))
});