I would like to select only one option below which works fine, but also to deselect an option with bootstrap making nothing selected. Is there a way to do this?
<div class="btn-group" data-toggle="buttons-radio">
<button data-toggle="button" class="btn btn-small">1</button>
<button data-toggle="button" class="btn btn-small">2</button>
<button data-toggle="button" class="btn btn-small">3</button>
</div>
The :checked CSS pseudo-class selector represents any radio ( <input type="radio"> ) element that is checked. The idea is to use the :checked selector to identify the selected radio button and unset it.
To uncheck radio buttons in React, we can set the checked prop of the radio button to false . We have the checked state that we use to set the checked prop of each radio button.
To find the selected radio button, you follow these steps: Select all radio buttons by using a DOM method such as querySelectorAll() method. Get the checked property of the radio button. If the checked property is true , the radio button is checked; otherwise, it is unchecked.
You'd have to do that with Javascript:
$(".btn-group button").removeClass("active");
See here: http://jsfiddle.net/TrPFf/2/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With