如何處理JavaScript中的條件復選框選擇？

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

我不確定這是否應該是注釋，但是您的代碼只會在頁面加載時檢查是否被檢查一次。 如果您希望它正常運行，則可能需要附加事件或添加循環？