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

Question

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

 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>

Answer 1

没有标记名复选框，所以

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

将返回一个空数组

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

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