Bootstrap - btn-group, data-toggle=“buttons” : how to select a button with JS and deselect all others?

Question

Hi, I'm using Bootstrap's .btn-group class like this:

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

In my app I need to "manually" select a button with JS and currently I'm doing it like this:

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

... times four, for each case that I need to select one of the buttons. That's not such a big deal if I have just 4 buttons, but now I need to have 13. Which means a lot of code.

My questions - does Bootstrap have a function that I can call to select a button and automatically deselect other buttons from the same group?

Cheers

Answer 1

You can use the attribute selector

$('[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/ .

About regex in attribute selector : http://www.thegeekyway.com/css-regex-selector-using-regular-expression-css/ .

Answer 2

You can use built-in BS method to toogle button state:

(you need default button.js on your page)

https://github.com/twbs/bootstrap/blob/master/js/button.js#L52-L66 http://getbootstrap.com/javascript/#buttons

$('#the-button-id-you-need').button('toggle');

Answer 3

There is no such function/method. However this is unnecessary.

Use class attribute instead of id . Then the code become much simpler:

HTML:

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

JS:

var aEls = $('.radio-popup-style-rect');
aEls.prop('checked', false).parent().removeClass('active');
aEls.eq(0).prop('checked', true).parent().addClass('active');

Answer 4

$("body").on("click", "label.btn", function(){$(this).find("input")[0].click();});