我在这里有代码(基本上是通过更改JS和html中的Jquery Checkbox Button进行修改的。$widget.find('input:radio')
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/
问题:选中/未选中的样式似乎可以正常工作,但是因为这是单选,所以我需要将其设为互斥的意思是只能选中一个框(当您选中一个单选框时,其余(同一组中的)应该变为未选中状态)自动),但是现在您看到的是可以选中多个框(显示它的样式),我需要jQuery函数的帮助才能使其正常工作。
我更新了代码以使用单选按钮。问题是,当将其与复选框一起使用时,它可以工作,因为您可以修改单个复选框而不必担心兄弟姐妹,但是使用单选按钮时,您必须遍历所有兄弟姐妹,选中/取消选中每个兄弟姐妹,这需要循环每次进行更改时都会设置该设置。
(请注意,在小提琴中,我暴露了单选按钮,以便您可以查看是否已选中每个按钮。)
$(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();
});
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句