如何限制使用JavaScript选中的复选框的数量（请不要使用jquery）

Question

我正在进行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;
                }
            }
        }

Answer 1

将return关键字添加到以下语句。

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

因此成为

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

如果没有return ，则onclick继续进行默认的检查操作。 一旦onclick获得false值，它将停止操作。

---

编辑：

在ckLimit函数中， return应该返回false 。

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