Bootstrap get radio button checked or selected value

<!DOCTYPE html>
<html>

<body>
    <div class="container mt-4">
        <h3>Bootstrap get radio button checked or selected value</h3>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="exampleRadios" id="radio1" value="option1" checked>
            <label class="form-check-label" for="radio1">
                Option 1
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="exampleRadios" id="radio2" value="option2">
            <label class="form-check-label" for="radio2">
                Option 2
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="exampleRadios" id="radio3" value="option3">
            <label class="form-check-label" for="radio3">
                Option 3
            </label>
        </div>

<button class="btn btn-primary mt-3" onclick="displaySelectedValue()">Get Selected Value</button>

<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>
        function displaySelectedValue() {
            var selectedValue = document.querySelector('input[name="exampleRadios"]:checked').value;
            document.getElementById('selectedValue').textContent = "Selected Value: " + selectedValue;
        }
    </script>
</body>

</html>