带 Jquery 和 Bootstrap 的单选按钮

Question

我这里有代码（基本上是从 Jquery Checkbox Button 修改而来，在 JS 中更改 $widget.find('input:radio') 并在 html 中更改 type = "radio"。

（它的主要作用是，它使收音机看起来比普通的收音机框更好看，更人性化，我想要一个大按钮，这样触摸屏用户可能会有更好的体验）

HTML

<span class="button-checkbox">
        <button type="button" class="btn btn-lg" data-color="primary">Option 1</button>
        <input type="radio" class="hidden" name="group1" id="op1" checked />
</span>

<span class="button-checkbox">
        <button type="button" class="btn btn-lg" data-color="primary">Option 2</button>
        <input type="radio" class="hidden" name="group1" id="op2"  />
</span>

JS

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

        // Settings
        var $widget = $(this),
            $button = $widget.find('button'),
            $checkbox = $widget.find('input:radio'),
            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();
    });
});

这是演示：http://jsfiddle.net/9o41oykp/2/

问题：checked/unchecked 风格似乎有效，但因为这是 radio 所以我需要它是相互的exclusive 意味着只能选中一个框（当您选中一个单选框时，其余（在同一组中）应该自动取消选中），但是现在正如您所见，您可以选中多个框（显示它的样式），我需要有关 jQuery 功能的帮助才能使其正常工作。

Answer 1

我更新了代码以使用单选按钮。问题是，当它与复选框一起使用时它会起作用，因为您可以修改单个复选框而不必担心兄弟姐妹，但是对于单选按钮，您必须运行通过所有兄弟姐妹，每个 checking/unchecking一个，每次进行更改时都需要循环遍历集合。

jsFiddle example

（请注意，在 fiddle 中，我公开了单选按钮，因此您可以看到每个单选按钮是否被选中。）

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

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

        // Actions
        function updateDisplay() {
            $('.button-checkbox').each(function () {
                var isChecked = $(this).find('input:radio').is(':checked');
                // Set the button's state
                $(this).find('button').data('state', (isChecked) ? "on" : "off");
                // Set the button's icon
                $(this).find('button').find('.state-icon')
                    .removeClass()
                    .addClass('state-icon ' + settings[$(this).find('button').data('state')].icon);
                // Update the button's color
                if (isChecked) {
                    $(this).find('button')
                        .removeClass('btn-default')
                        .addClass('btn-' + color + ' active');
                } else {
                    $(this).find('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();
    });
});

带 Jquery 和 Bootstrap 的单选按钮

Radio Button with Jquery and Bootstrap

javascript

css

jquery

radio-button

twitter-bootstrap