screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <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> </html>