javascript - 限制所选复选框数量的功能不起作用（javascript）

Question

伙计们，我被选中的复选框数量有限。基本上，如果用户选择了超过 1 个复选框，他会收到警告，但是当我测试它时，什么也没有发生。有人可以告诉我我做错了什么。

<div id="checkboxgroup">
    <input type="checkbox" name="check[]" id="1" /><label for="1">Izdelki zabavne elektronike</label> <br>
    <input type="checkbox" name="check[]" id="2" /><label for="2">Svetlobni efekti v ritmu glasbe (light show) </label>
    <br>
    <input type="checkbox" name="check[]" id="3" /><label for="3">Barvno mešanje svetlobe </label> <br>
    <input type="checkbox" name="check[]" id="4" /><label for="4">Uporabna elektronika </label> <br>
    <input type="checkbox" name="check[]" id="5" /><label for="5">Izdelava robota Otto </label> <br>
    <input type="checkbox" name="check[]" id="6" /><label for="6">CADCAM in CNC </label><br>
    <input type="checkbox" name="check[]" id="7" /><label for="7">Robotika </label> <br>
    <input type="checkbox" name="check[]" id="8" /><label for="8">Varjenje </label> <br>
    <input type="checkbox" name="check[]" id="9" /><label for="9">Programiranje v GDScript </label> <br>
    <input type="checkbox" name="check[]" id="10" /><label for="10">Programiranje v C# </label> <br>
    <input type="checkbox" name="check[]" id="11" /><label for="11">Avtomatika </label> <br>
    <input type="checkbox" name="check[]" id="12" /><label for="12">Od 3D animacije do izdelka na CNC stroju (Strokovna
        gimnazija) </label> <br>
    <input type="checkbox" name="check[]" id="13" /><label for="13">Zabavno računalniško programiranje (Strokovna
        gimnazija) </label> <br>
    <input type="checkbox" name="check[]" id="14" /><label for="14">Detektor laži (Strokovna gimnazija) </label> <br>
</div>
<script type="text/javascript">
    onlyOneCheckBox()
</script>

<script type="text/javascript">
    function onlyOneCheckBox() {
        var checkboxgroup = document.getElementById('checkboxgroup').getElementsByTagName("input");
        var limit = 1;
        for (var i = 0; i < checkboxgroup.length; i++) {
            checkboxgroup[i].onclick = function () {
                var checkedcount = 0;
                for (var i = 0; i < checkboxgroup.length; i++) {
                    checkedcount += (checkboxgroup[i].checked) ? 1 : 0;
                }
                if (checkedcount > limit) {
                    console.log("You can select maximum of " + limit + " checkbox.");
                    alert("You can select maximum of " + limit + " checkbox.");
                    this.checked = false;
                }
            }
        }
    }

标签： javascripthtml

Answer 1

不需要创建函数来记录点击动作。

<div id="checkboxgroup">
    <input type="checkbox" name="check[]" id="1" /><label for="1">Izdelki zabavne elektronike</label> <br>
    <input type="checkbox" name="check[]" id="2" /><label for="2">Svetlobni efekti v ritmu glasbe (light show) </label>
    <br>
    <input type="checkbox" name="check[]" id="3" /><label for="3">Barvno mešanje svetlobe </label> <br>
    <input type="checkbox" name="check[]" id="4" /><label for="4">Uporabna elektronika </label> <br>
    <input type="checkbox" name="check[]" id="5" /><label for="5">Izdelava robota Otto </label> <br>
    <input type="checkbox" name="check[]" id="6" /><label for="6">CADCAM in CNC </label><br>
    <input type="checkbox" name="check[]" id="7" /><label for="7">Robotika </label> <br>
    <input type="checkbox" name="check[]" id="8" /><label for="8">Varjenje </label> <br>
    <input type="checkbox" name="check[]" id="9" /><label for="9">Programiranje v GDScript </label> <br>
    <input type="checkbox" name="check[]" id="10" /><label for="10">Programiranje v C# </label> <br>
    <input type="checkbox" name="check[]" id="11" /><label for="11">Avtomatika </label> <br>
    <input type="checkbox" name="check[]" id="12" /><label for="12">Od 3D animacije do izdelka na CNC stroju (Strokovna
        gimnazija) </label> <br>
    <input type="checkbox" name="check[]" id="13" /><label for="13">Zabavno računalniško programiranje (Strokovna
        gimnazija) </label> <br>
    <input type="checkbox" name="check[]" id="14" /><label for="14">Detektor laži (Strokovna gimnazija) </label> <br>
</div>

<script type="text/javascript">
    // function onlyOneCheckBox() {
        var checkboxgroup = document.getElementById('checkboxgroup').getElementsByTagName("input");
        var limit = 1;
        for (var i = 0; i < checkboxgroup.length; i++) {
            checkboxgroup[i].onclick = function () {
                var checkedcount = 0;
                for (var i = 0; i < checkboxgroup.length; i++) {
                    checkedcount += (checkboxgroup[i].checked) ? 1 : 0;
                }
                if (checkedcount > limit) {
                    console.log("You can select maximum of " + limit + " checkbox.");
                    alert("You can select maximum of " + limit + " checkbox.");
                    this.checked = false;
                }
            }
        }

</script>