Multiple checkbox validation in javascript

In your application, you can use a single check box or you can use multiple checkboxes. If you use multiple checkboxes then how to validate multiple checkboxes.

Example 1
Example 2:

To validate multiple checkboxes using JavaScript, you can loop through each checkbox element and check if at least one is checked. Here's a simple example:

Example 1

<!DOCTYPE html>
<html>
<head>
    <title>Checkbox Validation</title>
    <script>
        function validateForm() {
            var checkboxes = document.getElementsByName('checkboxGroup');
            var isChecked = false;
            
            for (var i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].checked) {
                    isChecked = true;
                    break;
                }
            }
            
            if (!isChecked) {
                alert('Please select at least one checkbox.');
                return false;
            }
            
            return true;
        }
    </script>
</head>
<body>
    <form onsubmit="return validateForm()">
        <input type="checkbox" name="checkboxGroup"> Option 1<br>
        <input type="checkbox" name="checkboxGroup"> Option 2<br>
        <input type="checkbox" name="checkboxGroup"> Option 3<br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

In this example:

validateForm() is called when the form is submitted.
It retrieves all checkboxes with the name 'checkboxGroup'.
It checks if at least one checkbox is checked.
If none are checked, it displays an alert and returns false to prevent form submission.

You can adjust the validation logic as per your requirements.

Example 2:

In the below small checkbox example there are four colours and the user has to select a minimum of two colours. For validation, I have used selectedItems an array, so when a user checks the checkbox then stores that item in the selectedItems array, and then checks the length of that array when the user clicks the submit button.

if the length is less than two show the error popup else show the success popup.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple checkbox Validation in javascript </title>
    <style>
        .header {
            text-align: center;
            background-color: rgb(10, 165, 179);
            color: white;
            padding: 10px;
        }

        .wrapper {
            width: 20%;
            margin: auto;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgb(54, 54, 54);
            overflow: hidden;
        }

        .item {
            padding: 10px;
            margin-left: 40px;
        }

        button {
            display: block;
            margin: 10px auto;
            outline: none;
            padding: 12px;
            border: none;
            background-color: rgb(47, 47, 47);
            border-radius: 8px;
            color: white;
            cursor: pointer;
            width: 150px;
        }

        .result {
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="header">
            <h3>Items</h3>
        </div>
        <form id="itemForm">
            <div class="item">
                <label for="green">Green</label>
                <input id="green" type="checkbox" value="Green">
            </div>
            <div class="item">
                <label for="pink">Pink</label>
                <input id="pink" type="checkbox" value="Pink">
            </div>
            <div class="item">
                <label for="yellow">Yellow</label>
                <input id="yellow" type="checkbox" value="Yellow">
            </div>
            <div class="item">
                <label for="black">Black</label>
                <input id="black" type="checkbox" value="Black">
            </div>
            <button id="submit">Submit</button>

        </form>
    </div>
    <p class="result"></p>

    <script>
        var itemForm = document.getElementById('itemForm'); // getting the parent container of all the checkbox inputs
        var checkBoxes = itemForm.querySelectorAll('input[type="checkbox"]'); // get all the check box
        document.getElementById('submit').addEventListener('click', getData); //add a click event to the save button

        let selectedItems = [];

        function getData() { // this function will get called when the save button is clicked
            checkBoxes.forEach(item => { // loop all the checkbox item
                if (item.checked) {  //if the check box is checked
                    selectedItems.push(item);
                }
            });
            if (selectedItems.length < 2) { // check the selectedItems array length is less than 2 the throw error
                alert("Minimum two colors you have to pick..");
            }
            else {
                alert("Successfully submitted..");
            }
        }


    </script>
</body>

</html>

Multiple checkbox validation in javascript

Table of Contents

Example 1

Example 2: