CODEWITHSUNDEEP
javascripthtml
bicycle4431
bicycle4431

Reputation: 82

How to require at least one checkbox to be selected

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>

Upvotes: 0

Views: 118

Answers (1)

Moshe Sommers
Moshe Sommers

Reputation: 1516

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]');

Upvotes: 1

Related Questions