Javascript 带有Jquery和引导的单选按钮

我这里有代码（基本上是由JS中的

$widget.find（'input:radio'）

和html中的

type=“radio”

修改的）

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

HTML

选择1
选择2

JS

$（函数（）{
$（'.button复选框'）。每个（函数（）{
//背景
var$widget=$（这个），
$button=$widget.find（'button'），
$checkbox=$widget.find（'input:radio'），
颜色=$button.data（'color'），
设置={
关于：{
图标：“glyphicon glyphicon检查”
},
关：{
图标：“glyphicon glyphicon未选中”
}
};
//事件处理程序
$button.on（'click'，函数（）{
$checkbox.prop（'checked'，！$checkbox.is（':checked'）；
$checkbox.triggerHandler（'change'）；
updateDisplay（）；
});
$checkbox.on（'change'，function（）{
updateDisplay（）；
});
//行动
函数updateDisplay（）{
var isChecked=$checkbox.is（“：checked”）；
//设置按钮的状态
$button.data（'状态'，（已检查）？“打开”：“关闭”）；
//设置按钮的图标
$button.find（“.state图标”）
.removeClass（）
.addClass（'state-icon'+设置[$button.data（'state'）].icon）；
//更新按钮的颜色
如果（已检查）{
美元按钮
.removeClass（'btn-default'）
.addClass（'btn-'+颜色+'active'）；
}
否则{
美元按钮
.removeClass（'btn-'+颜色+'active'）
.addClass（“btn-default”）；
}
}
//初始化
函数init（）{
updateDisplay（）；
//如果适用，插入图标
如果（$button.find（'.state icon'）。长度==0）{
$button.prepend（“”）；
}
}
init（）；
});
});

以下是演示：

---

问题：选中/未选中的样式似乎有效，但因为这是收音机，所以我需要它是互斥的，这意味着只能选中一个框（当您选中一个收音机框时，其他框（在同一组中）应自动取消选中），但现在您可以选中多个框（显示它的样式），我需要有关jQuery函数的帮助以使其正常工作。

我更新了代码以使用单选按钮。问题是，当将其与复选框一起使用时，它将正常工作，因为您可以修改单个复选框，而不必担心同级，但是使用单选按钮时，您必须遍历所有同级，选中/取消选中每个复选框，w这需要在每次更改时在集合上循环

（请注意，在小提琴中，我暴露了单选按钮，以便您可以看到是否每个按钮都已选中。）

$（函数（）{
$（'.button复选框'）。每个（函数（）{
//背景
var$widget=$（这个），
$button=$widget.find（'button'），
$checkbox=$widget.find（'input:radio'），
颜色=$button.data（'color'），
设置={
关于：{
图标：“glyphicon glyphicon检查”
},
关：{
图标：“glyphicon glyphicon未选中”
}
};
//事件处理程序
$button.on（'click'，函数（）{
$checkbox.triggerHandler（'change'）；
if（$（this）.hasClass（'btn-default'））{
$checkbox.prop（'checked'，！$checkbox.is（':checked'）；
updateDisplay（）；
}
});
//行动
函数updateDisplay（）{
$（'.button复选框'）。每个（函数（）{
var isChecked=$（this.find（'input:radio'）。是（':checked'）；
//设置按钮的状态
$（this）.find（'button'）.data（'state'，（isChecked）？“开”：“关”）；
//设置按钮的图标
$（this.find（'button'）.find（'.state icon'））
.removeClass（）
.addClass（'state-icon'+设置[$（this）.find（'button'）.data（'state'））].icon）；
//更新按钮的颜色
如果（已检查）{
$（this.find（'button'））
.removeClass（'btn-default'）
.addClass（'btn-'+颜色+'active'）；
}否则{
$（this.find（'button'））
.removeClass（'btn-'+颜色+'active'）
.addClass（“btn-default”）；
}
})
}
//初始化
函数init（）{
updateDisplay（）；
//如果适用，插入图标
如果（$button.find（'.state icon'）。长度==0）{
$button.prepend（“”）；
}
}
init（）；
});
});

您是否介意对其进行一点改进：通常您不能“取消选中”一个广播框（如果已选中），对吧，唯一的方法是“取消选中”它是选中另一个框。是否可以存档？

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

$(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();
    });
});

$(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();
    });
});