Toggle Buttons by Class Name Similar to BS

by bizamajig

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<form>
    <label>Radius</label>
    <div class="btn-group" data-toggle-name="radius_options"
    data-toggle="buttons-radio">
        <button type="button" value="5" data-toggle="button" class="btn">5 Miles</button>
        <button type="button" value="10" data-toggle="button"
        class="btn">10 Miles</button>
        <button type="button" value="15" data-toggle="button"
        class="btn">15 Miles</button>
        <button type="button" value="20" data-toggle="button"
        class="btn active">20 Miles</button>
    </div>
    <input type="hidden" name="radius_options" value="20">
    <label>Sort</label>
    <div class="btn-group" data-toggle-name="sort_options" data-toggle="buttons-radio">
        <button type="button" value="default" data-toggle="button" class="btn active">Default</button>
        <button type="button" value="distance" data-toggle="button"
        class="btn">Distance</button>
    </div>
    <input type="hidden" name="sort_options" value="default">
    <br>
    <input type="submit" class="btn btn-warning pull-right" value="Search">
</form>

JavaScript

$('div.btn-group[data-toggle-name]').each(function () {
        var group = $(this);
        var form = group.parents('form').eq(0);
        var name = group.attr('data-toggle-name');
        var hidden = $('input[name="' + name + '"]', form); <!-- input name=data-toggle-name -->
        $('button', group).each(function () {
            var button = $(this);
            button.on('click', function () {
                hidden.val($(this).val());
                alert(hidden.val());
            });
            if (button.val() == hidden.val()) {
                button.addClass('active');
            }
        });
    });