-1

我正在为 Bootstrap 制作复选框/收音机/切换组，但我的复选框失败了 - 你能帮我让它们工作吗？

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');
        });
    });
});​

工作原型

4

3 回答 3

3

这就是我重写您的代码以使其与复选框组一起工作的方式：

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

            });
    });
});
于 2012-08-21T00:41:43.247 回答
0

HTML 代码似乎有效。问题出在你的 JS 上。我已经通过JSHint运行了您的代码，JSHint 是 JS 的在线 linter。它返回了以下问题。

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 '​'.

希望这对 DFTBA 有所帮助。:)

于 2012-06-09T14:51:27.453 回答
0

为什么不使用 bootstrap-button.js

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

于 2012-06-09T18:16:45.133 回答