Question

I am making checkboxes/radio/toggle groups for Bootstrap, but I failed with checkboxes – can you help me to make them work?

HTML:

<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:

$(function () {
    $('div.btn-group[data-toggle-name=*]').each(function () {
        var form = $(this).parents('form').eq(0);
        var name = $(this).attr('data-toggle-name');
        var hidden = $('input[name="' + name + '"]', form);
        var type = $(this).attr('data-toggle');
        var check = [];
        $('button', $(this)).each(function () {
            $(this).live('click', function () {
                if($(this).val() == hidden.val()) {
                    switch(type) {
                    case 'button':
                        $(this).removeClass('active');
                        hidden.val(0);
                        break;
                    case 'buttons-checkbox':
                        $(this).removeClass('active');
                        break;
                    default:
                        hidden.val($(this).val());
                    }
                } else {
                    switch(type) {
                    case 'button':
                        $(this).addClass('active');
                        hidden.val(1);
                        break;
                    case 'buttons-checkbox':
                        $(this).addClass('active');
                        break;
                    default:
                        hidden.val($(this).val());
                    }
                }
            });
            if($(this).val() == hidden.val()) $(this).addClass('active');
        });
    });
});​

working prototype

Answer 1

This is how i rewrote your code to make it work well with the check box group:

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');
                            }
                        }
                        break;
                    default:
                        if(button.val() == hidden.val()) {
                            button.addClass('active');
                        }
                        break;
                }

            });
    });
});