Question

我们有三个复选框，分别为Left，Right和Both。选择“向左”和“向右”时，两者都应禁用。

但是，在检查左右时；两者的复选框都未禁用。（或）警报（“ Hello 1”）没有触发。

document.getElementById('Left').disabled = false;
var isLeft = document.getElementById('Left').checked;

document.getElementById('Right').disabled = false;
var isRight = document.getElementById('Right').checked;


document.getElementById('Both').disabled = false;
var isBoth = document.getElementById('Both').checked;


if (isLeft == true && isRight == true)
{
                alert('Hello 1');
                document.getElementById('Both').checked = false;
                document.getElementById('Both').disabled = true;
}

下面是我的JavaScript文件中的原始代码

if ($("input:radio[name='Swelling']:checked").length > 0) {

        var isChecked = document.getElementById("SwellingYes").checked;

        if (isChecked === true)
        {

                document.getElementById('Left').disabled = false;
                let isLeft = document.getElementById('Left').checked;

                document.getElementById('Right').disabled = false;
                let isRight = document.getElementById('Right').checked;

                document.getElementById('Both').disabled = false;
                let isBoth = document.getElementById('Both').checked;

                if (isLeft && isRight) {
                    alert('Hello 1');
                    document.getElementById('Both').checked = false;
                    document.getElementById('Both').disabled = true;
                }
                if (isBoth) {
                    document.getElementById('Left').checked = false;
                    document.getElementById('Right').checked = false;
                    document.getElementById('Left').disabled = true;
                    document.getElementById('Right').disabled = true;
                }           

        }
}

Answer 1

您需要侦听每个复选框的change事件，然后像下面这样运行代码：

document.addEventListener('DOMContentLoaded', function () {
    Array.prototype.slice.call(document.querySelectorAll('input[type="checkbox"]')).forEach(function (checkbox) {
        checkbox.addEventListener('change', function () {

            document.getElementById('Left').disabled = false;
            var isLeft = document.getElementById('Left').checked;

            document.getElementById('Right').disabled = false;
            var isRight = document.getElementById('Right').checked;


            document.getElementById('Both').disabled = false;
            var isBoth = document.getElementById('Both').checked;


            if (isLeft == true && isRight == true) {
                alert('Hello 1');
                document.getElementById('Both').checked = false;
                document.getElementById('Both').disabled = true;
            }
        });
    });
});

    Left:
	<input type="checkbox" id="Left" />
    Right:
    <input type="checkbox" id="Right" />
    Both:
    <input type="checkbox" id="Both" />

如果仅支持现代浏览器，则也可以在此处使用一些语法糖：

document.addEventListener('DOMContentLoaded', () => {
    [...document.querySelectorAll('input[type="checkbox"]')].forEach((checkbox) => {
        checkbox.addEventListener('change', () => {
            document.getElementById('Left').disabled = false;
            let isLeft = document.getElementById('Left').checked;

            document.getElementById('Right').disabled = false;
            let isRight = document.getElementById('Right').checked;

            document.getElementById('Both').disabled = false;
            let isBoth = document.getElementById('Both').checked;

            if (isLeft == true && isRight == true) {
                alert('Hello 1');
                document.getElementById('Both').checked = false;
                document.getElementById('Both').disabled = true;
            }
        });
    });
});

    Left:
	<input type="checkbox" id="Left" />
    Right:
    <input type="checkbox" id="Right" />
    Both:
    <input type="checkbox" id="Both" />

如果您还想禁用Left和Right，则在选中Both时，可以这样做，此外，最好不要继续查询dom的元素，而是将其存储在变量中：

document.addEventListener('DOMContentLoaded', () => {
    let leftBox = document.getElementById('Left');
    let rightBox = document.getElementById('Right');
    let bothBox = document.getElementById('Both');
    [...document.querySelectorAll('input[type="checkbox"]')].forEach((checkbox) => {
        checkbox.addEventListener('change', () => {
            leftBox.disabled = false;
            let isLeft = leftBox.checked;

            rightBox.disabled = false;
            let isRight = rightBox.checked;

            bothBox.disabled = false;
            let isBoth = bothBox.checked;

            if (isLeft && isRight) {
                bothBox.checked = false;
                bothBox.disabled = true;
            }
            if (isBoth) {
                leftBox.checked = false;
                rightBox.checked = false;
                leftBox.disabled = true;
                rightBox.disabled = true;
            }
        });
    });
});

Left:
	<input type="checkbox" id="Left" />
    Right:
    <input type="checkbox" id="Right" />
    Both:
    <input type="checkbox" id="Both" />

Answer 2

我不确定这是否应该是注释，但是您的代码只会在页面加载时检查是否被检查一次。如果您希望它正常运行，则可能需要附加事件或添加循环？

如何处理JavaScript中的条件复选框选择？

2 个答案: