如何要求至少选择一个复选框答案

【问题标题】：How to require at least one checkbox to be selected如何要求至少选择一个复选框
【发布时间】：2020-06-19 03:19:57
【问题描述】：

为什么这个脚本不起作用？我是否有可能错误地定位属性？此表单的结果应该是除非选中至少一个复选框，否则无法提交，但是用户可以选择任意数量。

function valCheckbox() {
    var checkboxes = document.getElementsByTagName("checkbox");
    var atLeastOneCheckBoxIsChecked = false;
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked == true) {
            atLeastOneCheckBoxIsChecked = true;
            break;
        }
    }

    if (atLeastOneCheckBoxIsChecked === false) {
        alert("Please select at least one option.");
    }
}

<div class="elq-field-style form-element-layout row">
    <div class="col-sm-12 col-xs-12">
        <label class="elq-label">Please select one or more options</label>
        <div>Choose as many as apply</div>
        <div id="formElement13">
            <div class="single-checkbox-row row">
                <input type="checkbox" name="option1">
                <label class="checkbox-aligned elq-item-label">Option 1</label>
            </div>
        </div>
        <div id="formElement14">
            <div class="single-checkbox-row row">
                <input type="checkbox" name="option2">
                <label class="checkbox-aligned elq-item-label">Option 2</label>
            </div>
        </div>
        <div id="formElement15">
            <div class="single-checkbox-row row">
                <input type="checkbox" name="option3">
                <label class="checkbox-aligned elq-item-label">Option 3</label>
            </div>
        </div>
        <div id="formElement16">
            <div class="single-checkbox-row row">
                <input type="checkbox" name="option4">
                <label class="checkbox-aligned elq-item-label">Option 4</label>
            </div>
        </div>
        <div id="formElement17">
            <div class="single-checkbox-row row">
                <input type="checkbox" name="option5">
                <label class="checkbox-aligned elq-item-label">Option 5</label>
            </div>
        </div>
        <div id="formElement18">
            <div class="single-checkbox-row row">
                <input type="checkbox" name="option6">
                <label class="checkbox-aligned elq-item-label">Option 6</label>
            </div>
        </div>
    </div>
</div>
<div id="formElement20" class="elq-field-style form-element-layout row">
    <div class="col-sm-4 col-xs-12">
        <div class="row">
            <div class="col-xs-12">
                <input type="Submit" class="sub-button" value="Submit" onclick="valCheckbox();">
            </div>
        </div>
    </div>
</div>

【问题讨论】：

此堆栈讨论为您提供了一个有用的答案：stackoverflow.com/a/11787777/13745258
这能回答你的问题吗？ Making sure at least one checkbox is checked
@sebastian-ruehmann 您应该能够将一个问题标记为另一个问题的重复；我不知道你有没有，但如果你没有，请提醒一下。
你见过'checkboxes'变量值吗？请在'checkboxes'声明的下一个函数中写入console.log(checkboxes)。

标签： javascript html

【解决方案1】：

没有标记名复选框，所以

    var checkboxes = document.getElementsByTagName("checkbox");

将返回一个空数组

您应该使用 querySelectorAll 和 type=checkbox 的目标输入

    var checkboxes = document.querySelectorAll('input[type=checkbox]');

【讨论】：

@S.Hesam 你什么意思？上面的代码适用于此更新