<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="aBtnGroup" class="btn-group">
<button type="button" value="L" class="btn btn-default">Left</button>
<button type="button" value="M" class="btn btn-default">Middle</button>
<button type="button" value="R" class="btn btn-default">Right</button>
</div>
<p>
<div>Selected Val: <span id="selectedVal"></span></div>
</body>
</html>
// Code goes here
$(document).ready(function() {
// Get click event, assign button to var, and get values from that var
$('#aBtnGroup button').on('click', function() {
var thisBtn = $(this);
thisBtn.addClass('active').siblings().removeClass('active');
var btnText = thisBtn.text();
var btnValue = thisBtn.val();
console.log(btnText + ' - ' + btnValue);
$('#selectedVal').text(btnValue);
});
// You can use this to set default value
// It will fire above click event which will do the updates for you
$('#aBtnGroup button[value="M"]').click();
});
/* Styles go here */