Bootstrap Uncheck radio Button
Bootstrap Uncheck/reset radio Button:To uncheck a radio button in Bootstrap, you can use JavaScript or jQuery. First, select the radio button element using its ID or class. Then, use the prop
method to set the checked
property to false
.
Thanks for your feedback!
Your contributions will help us to improve service.
How can I uncheck a radio button using Bootstrap?
This is an HTML code snippet that demonstrates how to uncheck or reset a radio button using Bootstrap and jQuery.
The code includes a container with multiple radio buttons representing different states. The radio buttons are wrapped in form-check
classes. One of the radio buttons is initially checked (California
).
Below the radio buttons, there is a "Uncheck" button (uncheck-btn
). When this button is clicked, the jQuery script is triggered.
It selects all radio buttons with the name stateRadio
and sets their checked
property to false
, effectively unchecking all of them.
Bootstrap Uncheck radio Button Example
<body>
<div class="container mt-5 text-center ">
<h3>Bootstrap uncheck/reset Radio Button</h3>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="stateRadio" id="radio1" value="Alabama">
<label class="form-check-label" for="radio1">Alabama</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="stateRadio" id="radio2" value="Alaska">
<label class="form-check-label" for="radio2">Alaska</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="stateRadio" id="radio3" value="Arizona">
<label class="form-check-label" for="radio3">Arizona</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="stateRadio" id="radio4" value="Arkansas">
<label class="form-check-label" for="radio4">Arkansas</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="stateRadio" id="radio5" checked value="California">
<label class="form-check-label" for="radio5">California</label>
</div>
<button id="uncheck-btn" class="btn btn-danger">Uncheck</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function () {
$('#uncheck-btn').click(function () {
$('input[name=stateRadio]').prop('checked', false);
});
});
</script>
</body>