Bootstrap radio / checkboxes

by Plippie Plop

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<form id="edit-accounts" class="form-horizontal" method="post">
    <fieldset>

        <div class="control-group">
            <label class="control-label">Radio Group:</label>
            <div class="controls btn-group" data-toggle="buttons-radio" data-toggle-name="radio_group">
                <button type="button" value="1" class="btn" data-toggle="button">first</button>
                <button type="button" value="2" class="btn" data-toggle="button">second</button>
                <button type="button" value="3" class="btn" data-toggle="button">third</button>
            </div>
            <input type="hidden" name="radio_group" value="1" />
        </div>

        <div class="control-group">
            <label class="control-label">Checkbox Group:</label>
            <div class="controls btn-group" data-toggle="buttons-checkbox" data-toggle-name="checkbox_group">
                <button type="button" value="1" class="btn" data-toggle="button">js</button>
                <button type="button" value="2" class="btn" data-toggle="button">fiddle</button>
                <button type="button" value="3" class="btn" data-toggle="button">alpha</button>
            </div>
            <input type="hidden" name="checkbox_group" value="1" />
        </div>

        <div class="control-group">
            <label class="control-label">Toggle:</label>
            <div class="controls btn-group" data-toggle="button" data-toggle-name="button_group">
                <button type="button" value="1" class="btn" data-toggle="button">on/off</button>
            </div>
            <input type="hidden" name="button_group" value="1" />
        </div>
    </fieldset>
</form>

JavaScript

jQuery(function($) {
     $('div.btn-group[data-toggle-name]').each(function(){
            var group   = $(this);
            var form    = group.parents('form').eq(0);
            var name    = $(this).attr('data-toggle-name');
            var hidden  = $('input[name="' + name + '"]', form);
            var type    = group.attr('data-toggle');
            var check   = (hidden.val() != '') ? hidden.val().split(',') : [];
            $('button', group).each(function() {
                var button = $(this);
                button.live('click', function() {
                    switch(type) {
                        case 'buttons-checkbox':
                            if(check.indexOf(button.val()) == -1){
                                button.addClass('active');
                                check.push(button.val());
                            }else{
                                check.splice(check.indexOf(button.val()),1);
                                button.removeClass('active');
                            }
                            hidden.val(check.toString());
                            break;
                        case 'button':
                            if(button.val() == hidden.val()) {
                                button.removeClass('active');
                                hidden.val(0);
                            } else {
                                button.addClass('active');
                                hidden.val(1);
                            }
                            break;
                        default:
                            hidden.val(button.val());
                            break;
                    }
                });
                switch(type) {
                    case 'buttons-checkbox':
                        for (i=0;i<check.length;i++) {
                            if(button.val() == check[i]) {
                                button.addClass('active');
                            }
      ...