Radio Button On Bootstrap 5 Не работает с этим JS Проверить - PullRequest
Новая
       19

Radio Button On Bootstrap 5 Не работает с этим JS Проверить

1 голос
/ 10 июля 2020

Это код, который я сделаю в JS: мне нужно перейти и показать какой-то элемент в событии переключателя изменения; 

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";
}
});

Это 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>

Я использовал Bootstrap 5 Это код, который я сделал в JS: мне нужно перейти и показать какой-то элемент в событии переключателя изменения;

1 Ответ

1 голос
/ 10 июля 2020

Проверьте это, вы добавляете прослушиватель событий только для первого, здесь я добавил прослушиватель событий для всех полей радио, выбирая все и просматривая все. 

        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 : Как использовать в addEventListener на переключателе в Plain Javascript?

Credits : { ссылка }

...