Bootstrap Recipients Selector


	<div class="container">
    <h3>Recipients Selector w/ jQuery Checkbox Buttons<br>
        <small>Choose your recipients, and display the results below!</small>
    </h3>    
    <p><code>NOTE: These elements are not hooked together - like many other samples on bootsnipp.com, this is a framework sample.</code></p>
    <br>

	<div class="panel panel-default recipients">
        <div class="panel-heading">
            <span class="button-checkbox">
                <button type="button" class="btn btn-sm" data-color="default">All Guests</button>
                <input type="checkbox" id="showall" class="hidden" checked="">
            </span>
            <span class="button-checkbox">
                <button type="button" class="btn btn-sm" data-color="default">Not Yet Invited</button>
                <input type="checkbox" id="showall" class="hidden">
            </span>
            <span class="button-checkbox">
                <button type="button" class="btn btn-sm" data-color="default">Yes RSVP</button>
                <input type="checkbox" id="showall" class="hidden">
            </span>
            <span class="button-checkbox">
                <button type="button" class="btn btn-sm" data-color="default">No RSVP</button>
                <input type="checkbox" id="showall" class="hidden">
            </span>
            <span class="button-checkbox">
                <button type="button" class="btn btn-sm" data-color="default">Maybe RSVP</button>
                <input type="checkbox" id="showall" class="hidden">
            </span>
            <span class="button-checkbox">
                <button type="button" class="btn btn-sm" data-color="default">Not Yet Replied</button>
                <input type="checkbox" id="showall" class="hidden">
            </span>
        </div>

        <div class="panel-body">
            <div class="recipient" title="Travis Wilson
[email protected]any.com">
                <img src="http://placehold.it/50x50"> Travis Wilson <div class="email">[email protected]</div>
            </div>
            <div class="recipient" title="Marshall Hitt
[email protected]">
                <img src="http://placehold.it/50x50"> Marshall Hitt <div class="email">[email protected]</div>
            </div>
            <div class="recipient" title="Joe Cadena
[email protected]">
                <img src="http://placehold.it/50x50"> Joe Cadena <div class="email">[email protected]</div>
            </div>
            <div class="recipient" title="Mike McBride
[email protected]">
                <img src="http://placehold.it/50x50"> Mike McBride <div class="email">[email protected]</div>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="panel-footer">
            <span class="text-muted">4 guest(s) selected</span>
        </div>
    </div>
</div>
	<script type="text/javascript"></script>

    .recipients .panel-body {
    overflow: auto;
    max-height: 200px; 
}
.recipients .recipient {
    display: block;
    float: left;
    width: 140px;
    margin: 0 5px 5px 0;
    font-size: 0.85em;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap; 
}
.recipients .recipient img {
    float: left;
    height: 28px;
    margin-right: 5px; 
}
.recipients .recipient .email {
    font-size: 0.9em;
    color: #999;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap; 
}
    

	$(function () {
    $('.button-checkbox').each(function () {

        // Settings
        var $widget = $(this),
            $button = $widget.find('button'),
            $checkbox = $widget.find('input:checkbox'),
            color = $button.data('color'),
            settings = {
                on: {
                    icon: 'glyphicon glyphicon-check'
                },
                off: {
                    icon: 'glyphicon glyphicon-unchecked'
                }
            };

        // Event Handlers
        $button.on('click', function () {
            $checkbox.prop('checked', !$checkbox.is(':checked'));
            $checkbox.triggerHandler('change');
            updateDisplay();
        });
        $checkbox.on('change', function () {
            updateDisplay();
        });

        // Actions
        function updateDisplay() {
            var isChecked = $checkbox.is(':checked');

            // Set the button's state
            $button.data('state', (isChecked) ? "on" : "off");

            // Set the button's icon
            $button.find('.state-icon')
                .removeClass()
                .addClass('state-icon ' + settings[$button.data('state')].icon);

            // Update the button's color
            if (isChecked) {
                $button
                    .removeClass('btn-default')
                    .addClass('btn-' + color + ' active');
            }
            else {
                $button
                    .removeClass('btn-' + color + ' active')
                    .addClass('btn-default');
            }
        }

        // Initialization
        function init() {

            updateDisplay();

            // Inject the icon if applicable
            if ($button.find('.state-icon').length == 0) {
                $button.prepend('<i class="state-icon ' + settings[$button.data('state')].icon + '"></i> ');
            }
        }
        init();
    });
});