Twitter Bootstrap Checkbox JavaScript - Stack Overflow

admin管理员组

文章数量:1327945

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

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

• javascript
• checkbox
• twitter-bootstrap

Share Follow edited Jun 9, 2012 at 14:46 Colin Brock 21.6k99 gold badges4949 silver badges6262 bronze badges asked Jun 9, 2012 at 14:20 atomosatomos 2911 gold badge11 silver badge66 bronze badges 1

• 3 This is a rather poor description of a problem. – augustomen Commented Nov 5, 2012 at 17:12

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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;
                }

            });
    });
});

The HTML code seems valid. The issue es to your JS. I've ran your code through JSHint, an online linter for JS. It returned the following issues.

Line 2: $('div.btn-group[data-toggle-name=*]').each(function () {
Missing "use strict" statement.

Line 10: if($(this).val() == hidden.val()) {
Expected '===' and instead saw '=='.

Line 36: if($(this).val() == hidden.val()) $(this).addClass('active');
Expected '===' and instead saw '=='.

Line 36: if($(this).val() == hidden.val()) $(this).addClass('active');
Expected '{' and instead saw '$'.

Line 39: });​
Unexpected '​'.

Hope this helps and DFTBA. :)

Why don't you use bootstrap-button.js

http://twitter.github./bootstrap/javascript.html#buttons

本文标签： Twitter Bootstrap Checkbox JavaScriptStack Overflow