javascript - Bootstrap -btn 组，数据切换 ="buttons": how to select a button with JS and deselect all others?

Question

您好，我正在使用 Bootstrap 的 .btn-group 类，如下所示:

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default active">
        <input type="radio" name="radio-popup-position" id="radio-popup-style-1" checked>button-1
    </label>
    <label class="btn btn-default">
        <input type="radio" name="radio-popup-position" id="radio-popup-style-2">button-2
    </label>
    <label class="btn btn-default">
        <input type="radio" name="radio-popup-position" id="radio-popup-style-3">button-3
    </label>
    <label class="btn btn-default">
        <input type="radio" name="radio-popup-position" id="radio-popup-style-4">button-4
    </label>

在我的应用程序中，我需要使用 JS“手动”选择一个按钮，目前我是这样做的:

$('#radio-popup-style-rect-1').parent().addClass('active');
$('#radio-popup-style-rect-1').get(0).checked = true;

$('#radio-popup-style-rect-2').removeAttr('checked').parent().removeClass('active');
$('#radio-popup-style-rect-3').removeAttr('checked').parent().removeClass('active');
$('#radio-popup-style-rect-4').removeAttr('checked').parent().removeClass('active');

... 乘以四次，对于我需要选择其中一个按钮的每种情况。如果我只有 4 个按钮，那没什么大不了的，但现在我需要 13 个。这意味着需要编写大量代码。

我的问题 - Bootstrap 是否有一个函数，我可以调用它来选择一个按钮并自动取消选择同一组中的其他按钮？

干杯

Answer 1

您可以使用属性选择器

$('[id*="radio-popup-style-"]').click(function(){
    $(this).prop('checked', true).parent().addClass('active');
    $('[id*="radio-popup-style-"]').not($(this)).removeAttr('checked').prop('checked', false).parent().removeClass('active');
});

JSFIDDLE:http://jsfiddle.net/TRNCFRMCN/6o1k1cvo/1/ .

关于属性选择器中的正则表达式:http://www.thegeekyway.com/css-regex-selector-using-regular-expression-css/ .