Как обработать выбор условного флажка в JavaScript?

1

У нас есть три флажка, как Left, Right, Both. При выборе "Влево" и "Вправо" Оба должны быть отключены.

Однако при проверке справа и слева; флажок для обоих не отключается. (или) alert ('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;
                }           

        }
}
  • 1
    Пожалуйста, всегда добавляйте весь код, соответствующий вашему вопросу. В этом случае вы спрашиваете о флажках, поэтому включите HTML.
  • 0
    Исходя из вашего вопроса, я полагаю, вы также хотите проверить ИЛИ не И?
Показать ещё 2 комментария
Теги:

2 ответа

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" />
  • 0
    это очень полезно Это должно быть наоборот. Когда мы выбираем оба - метка для левого и правого должна быть отключена
  • 0
    Когда мы выбираем «Оба»; Левый и правый должны быть отключены.
Показать ещё 3 комментария
0

Я не уверен, что это комментарий или нет, но ваш код проверяет только, проверен ли он один раз или нет, при загрузке страницы. Если вы хотите, чтобы он работал правильно, вы можете захотеть связать событие или добавить цикл?

  • 0
    Я согласен. Там должно быть событие. Моя нынешняя логика кода только проверяет, установлен ли флажок или нет. Когда флажок «Влево» и «Вправо» установлен, должно инициироваться событие, которое отключает флажок для метки: «Оба». Я не уверен, как этого добиться ..
  • 0
    Это должен быть комментарий. Я понимаю, что вам не хватает представителя. еще предстоит сделать это, но вы обнаружите, что ответы, которые должны быть комментариями, будут опущены. Сосредоточьтесь на публикации качественных ответов, пока не получите право комментировать.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню