How to require at least one checkbox to be selected

Question

Why is this script not working? Is it possible that I am targeting the attributes wrong? Result of this form should be that it cannot be submitted unless at least one checkbox is selected, however, user can select as many as they want.

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>

This stack discussion has a helpful answer for you: https://stackoverflow.com/a/11787777/13745258 — sebastian-ruehmann, Jun 18 '20 at 19:10
Does this answer your question? [Making sure at least one checkbox is checked](https://stackoverflow.com/questions/11787665/making-sure-at-least-one-checkbox-is-checked) — Heretic Monkey, Jun 18 '20 at 19:17
@sebastian-ruehmann You should be able to flag a question as a duplicate of another question; I can't tell if you have or not, but just a heads up if you haven't. — Heretic Monkey, Jun 18 '20 at 19:19
Have you ever seen the 'checkboxes' variable value? Please write console.log(checkboxes) in your function at the very next of the 'checkboxes' declaration. — S. Hesam, Jun 18 '20 at 19:23

score 1 · Accepted Answer · answered Jun 18 '20 at 19:15

1

There's no Tagname checkbox so

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

Will return an empty array

You should use querySelectorAll and target input with type=checkbox

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

answered Jun 18 '20 at 19:15

Moshe Sommers

1,466
7
11

@S.Hesam What do you mean? The code above works with this update – Moshe Sommers Jun 18 '20 at 19:32

How to require at least one checkbox to be selected

1 Answers1