Как ограничить количество флажков, отмеченных с помощью JavaScript (без jquery, пожалуйста)

Я делаю тест Node Express с множественным выбором, и на каждый вопрос есть разное количество правильных ответов. У меня есть ответы, поступающие из базы данных, автоматически заполняемой в PUG. Однако моя функция работает неправильно, когда я нажимаю на ограничение правильных ответов, появляется предупреждение, но затем ответ все равно проверяется. Что я делаю не так?

Я попытался создать функцию, которая отслеживает количество проверенных ответов, но не может остановить ее после достижения предела.


block content
    header.header USA Government Test
    main.q-card
        p.q-promt #{question} 
            small (Please choose #{mcLimit} answers)
        hr
        each answer in answers
            label.container
                | #{answer.Answer_prompt}
                input(type='checkbox' name='answer' onclick = "ckLimit()")
                span.checkmark
            hr
    script.
        function ckLimit() {
            var limit = #{mcLimit};
            var total = 0;
            var inputTag = document.getElementsByTagName('input');
            var x = inputTag.length;
            for (var i = 0; i < x; i++) {
                if (inputTag[i].checked) {
                    total += 1;
                }
                if (total > limit) {
                    alert(`Please select only ${limit}`);
                    this.checked = false;
                    return;
                }
            }
        }

все работает принимаем: this.checked = false; Он продолжает проверять ответы. Вот как выглядит мой код сейчас:

    header.header USA Government Test
    main.q-card
        p.q-promt #{question} 
            small (Please choose #{mcLimit} answers)
        hr
        each answer in answers
            label.container
                | #{answer.Answer_prompt}
                input(type='checkbox' name='answer' onclick = "return ckLimit()")
                span.checkmark
            hr
    script.
        function ckLimit() {
            var limit = #{mcLimit};
            var total = 0;
            var inputTag = document.getElementsByTagName('input');
            var x = inputTag.length;
            for (var i = 0; i < x; i++) {
                if (inputTag[i].checked) {
                    total += 1;
                }
                if (total > limit) {
                    alert(`Please select only ${limit}`);
                    this.checked = false;
                    return;
                }
            }
        }
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
120
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Добавьте ключевое слово return к приведенному ниже утверждению.

input(type='checkbox' name='answer' onclick = "ckLimit()")

таким образом становясь

input(type='checkbox' name='answer' onclick = "return ckLimit()")

Без returnonclick продолжает разрешать действие проверки по умолчанию. Как только onclick получает значение false, действие останавливается.


Редактировать:

В функции ckLimitreturn должно возвращать false.

if (total > limit) {
    alert(`Please select only ${limit}`);
    this.checked = false;
    return false;   
}

Спасибо за ответ, но он все еще не работает должным образом. Он по-прежнему предупреждает, что я достиг предела, а затем продолжает проверять элемент.

Daniel Torres 30.07.2019 03:46

Проверьте отредактированную часть. return должен вернуться false

more 30.07.2019 12:41

Я только сейчас увидел это редактирование. Спасибо за вашу помощь!!

Daniel Torres 31.07.2019 06:11

Другие вопросы по теме