Bootstrap Set Radio button default checked or selected
Bootstrap Set Radio button default checked or selected:In Bootstrap, to set a radio button as default checked or selected, you can use the
checked attribute. By adding the
checked attribute to the desired radio button input element, it will be selected by default when the page loads. For example,
<input type="radio" name="example" id="option1" checked> will make the radio button with the ID "option1" selected by default. This allows you to pre-select a specific option in a group of radio buttons in Bootstrap.
written
reviewed
updated
Thanks for your feedback!
Your contributions will help us to improve service.
How can I set a default checked or selected option for a Bootstrap Set Radio Button?
This code snippet demonstrates how to set a default checked or selected radio button using Bootstrap. The checked attribute is added to the desired input element, such as id="radio2", to make it selected by default.
The JavaScript code uses jQuery to handle the change event of the radio buttons. When a radio button is selected, its value is retrieved and displayed in the <span> element with the id "selectedEntrepreneur".
The trigger('change') function is used to initially trigger the change event on page load.
Bootstrap Set Radio Button default checked or selected Example
Copied to Clipboard
xxxxxxxxxx<body> <div class="container mt-5"> <h3>Bootstrap Radio button default checked or selected</h3> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="radio1" value="elonmusk" > <label class="form-check-label" for="radio1"> Elon Musk </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="radio2" checked value="jeffbezos"> <label class="form-check-label" for="radio2"> Jeff Bezos </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="radio3" value="markzuckerberg"> <label class="form-check-label" for="radio3"> Mark Zuckerberg </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="radio4" value="warrenbuffett"> <label class="form-check-label" for="radio4"> Warren Buffett </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="radio5" value="billgates"> <label class="form-check-label" for="radio5"> Bill Gates </label> </div> <p>Selected Entrepreneur: <span id="selectedEntrepreneur"></span></p> </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 () { $('input[name="exampleRadios"]').change(function () { var selectedValue = $('input[name="exampleRadios"]:checked').val(); $('#selectedEntrepreneur').text(selectedValue); }); // Trigger change event on page load $('input[name="exampleRadios"]:checked').trigger('change'); }); </script></body>Output of Bootstrap Radio button default checked or selected
Ad