Bootstrap 5 上的单选按钮无法使用此 JS 检查

Question

This The code i Make it In JS: I need to head and show some element in change radio button event;

let radioChange = document.getElementsByName("pain-location");
let headPain = document.getElementById("headPain");
let shoulderPain = document.getElementById("shoulderPain");
let backPain = document.getElementById("backPain");
let listInner = document.getElementsByClassName("list-inner");

radioChange[0].addEventListener('click', (e) => {
if(document.getElementById('painOption1').checked) {
    for (let i=0;i<listInner.length;i+=1){
        listInner[i].style.display = 'none';
    }
    headPain.style.display = "block";
} else if(document.getElementById('painOption2').checked) {
    for (let i=0;i<listInner.length;i+=1){
        listInner[i].style.display = 'none';
    }
    shoulderPain.style.display = "block";
} else if(document.getElementById('painOption3').checked) {
    for (let i=0;i<listInner.length;i+=1){
        listInner[i].style.display = 'none';
    }
    backPain.style.display = "block";
}
});

This Is the HTML:

<div class="btn-group man-points">
                <div class="ptn-check-point" id="optionBtn1">
                    <input type="radio" class="btn-check" name="pain-location" id="painOption1" required>
                    <label class="btn btn-secondary" for="painOption1"></label>
                </div>
                <div class="ptn-check-point" id="optionBtn2">
                    <input type="radio" class="btn-check" name="pain-location" id="painOption2" checked required>
                    <label class="btn btn-secondary" for="painOption2"></label>
                </div>
                <div class="ptn-check-point" id="optionBtn3">
                    <input type="radio" class="btn-check" name="pain-location" id="painOption3" required>
                    <label class="btn btn-secondary" for="painOption3"></label>
                </div>
            </div>

            <div class="list-inner" id="headPain">
                <h5>Head</h5>
            </div>
            <div class="list-inner" id="shoulderPain">
                <h5>Shoulder</h5>
            </div>
            <div class="list-inner" id="backPain">
                <h5>Shoulder</h5>
            </div>

I Used Bootstrap 5 This The code i Make it In JS: I need to head and show some element in change radio button event;

Answer 1

Check this, you are adding event listener only for the first one, here i have added event listener to all radio fields by fetching all and looping through all.

        let headPain = document.getElementById("headPain");
        let shoulderPain = document.getElementById("shoulderPain");
        let backPain = document.getElementById("backPain");
        let listInner = document.getElementsByClassName("list-inner");
        document.querySelectorAll('input[name="pain-location"]').forEach(element => {

            element.addEventListener('click', (e) => {
                if (document.getElementById('painOption1').checked) {
                    for (let i = 0; i < listInner.length; i += 1) {
                        listInner[i].style.display = 'none';
                    }
                    headPain.style.display = "block";
                } else if (document.getElementById('painOption2').checked) {
                    for (let i = 0; i < listInner.length; i += 1) {
                        listInner[i].style.display = 'none';
                    }
                    shoulderPain.style.display = "block";
                } else if (document.getElementById('painOption3').checked) {
                    for (let i = 0; i < listInner.length; i += 1) {
                        listInner[i].style.display = 'none';
                    }
                    backPain.style.display = "block";
                }
            });
        })

ref : How to use on addEventListener on radio button in Plain Javascript?

Credits : https://stackoverflow.com/users/5947043/adyson