[英]Bootstrap - btn-group, data-toggle=“buttons” : how to select a button with JS and deselect all others?
Hi, I'm using Bootstrap's .btn-group class like this: 嗨,我正在使用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>
In my app I need to "manually" select a button with JS and currently I'm doing it like this: 在我的应用程序中,我需要“手动”选择带有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');
... 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. 如果我只有4个按钮,那没什么大不了的,但是现在我需要有13个按钮。这意味着很多代码。
My questions - does Bootstrap have a function that I can call to select a button and automatically deselect other buttons from the same group? 我的问题-Bootstrap是否具有可以调用以选择按钮并自动取消选择同一组中其他按钮的功能?
Cheers 干杯
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');
});
About regex in attribute selector : http://www.thegeekyway.com/css-regex-selector-using-regular-expression-css/ . 关于属性选择器中的 正则表达式 : http : //www.thegeekyway.com/css-regex-selector-using-regular-expression-css/ 。
You can use built-in BS method to toogle button state: 您可以使用内置的 BS方法切换按钮状态:
(you need default button.js on your page) (您需要页面上的默认button.js)
https://github.com/twbs/bootstrap/blob/master/js/button.js#L52-L66 http://getbootstrap.com/javascript/#buttons https://github.com/twbs/bootstrap/blob/master/js/button.js#L52-L66 http://getbootstrap.com/javascript/#buttons
$('#the-button-id-you-need').button('toggle');
There is no such function/method. 没有这样的功能/方法。 However this is unnecessary. 但是,这是不必要的。
Use class
attribute instead of id
. 使用class
属性而不是id
。 Then the code become much simpler: 然后,代码变得更加简单:
HTML: 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: JS:
var aEls = $('.radio-popup-style-rect');
aEls.prop('checked', false).parent().removeClass('active');
aEls.eq(0).prop('checked', true).parent().addClass('active');
$("body").on("click", "label.btn", function(){$(this).find("input")[0].click();});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.