Bootstrap 5上的单选按钮无法与此JS Check一起使用

debugcn 发表于 Dev

拉玛·穆罕默德（Rama Mohamed）

我在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中实现：我需要显示更改单选按钮事件中的某些元素；

Yerrapotu Manoj基兰

选中此选项，您将仅为第一个添加事件侦听器，在这里，我通过获取所有内容并遍历所有内容，将事件侦听器添加到所有无线电字段。

        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：如何在纯Javascript中的单选按钮上的addEventListener上使用？

积分：https : //stackoverflow.com/users/5947043/adyson

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。