This tutorial shows how to limit number of checkbox selections using JavaScript in a group of checkboxes.

Suppose you have a group of checkboxes in a form or in a div or table cell or wherever else and you have a requirement that a user can select maximum of two or three or n number of checkboxes then you need to restrict it using javascript or jquery. The below example shows how to achieve it.

Using form example. The below example shows that maximum of two checkboxes can be selected.
HTML

In the below source code we have added three checkboxes in the form and we will allow user selects only two checkboxes out of three.

Notice how we have given name for each checkbox.

<body>
    <form method="post" name="form_name" id="form_name">
        <input type="checkbox" name="check[]" value="CheckBox 1"/>
        <input type="checkbox" name="check[]" value="CheckBox 2"/>
        <input type="checkbox" name="check[]" value="CheckBox 3"/>
    </form>
    <script type="text/javascript">checkBoxLimit()</script>
</body>

JavaScript

The below source code is used to limit checkbox selections using JavaScript in the above html form.

<script type="text/javascript">
function checkBoxLimit() {
    var checkBoxGroup = document.forms.form_name.check;
    var limit = 2;
    for (var i = 0; i < checkBoxGroup.length; i++) {
        checkBoxGroup[i].onclick = function() {
            var checkedcount = 0;
            for (var i = 0; i < checkBoxGroup.length; i++) {
                checkedcount += (checkBoxGroup[i].checked) ? 1 : 0;
            }
            if (checkedcount > limit) {
                alert("You can select only a maximum of " + limit + " checkboxes.");
                this.checked = false;
            }
        }
    }
}
</script>

Using div example:

You can place checkboxes in any tag using attribute id. The below example shows that only one checkbox can be selected.

HTML

Here in the below source code we have added two checboxes and only one checkbox will be selected.

<div id
="checkboxgroup">
<input type="checkbox" value="CheckBox 1" name="check[]">
<input type="checkbox" value="CheckBox 2" name="check[]">
<input type="checkbox" value="CheckBox 3" name="check[]">
</div>
<script type="text/javascript">
    onlyOneCheckBox()
</script>

JavaScript

The below source code restricts user to limit checkbox selections using JavaScript. Here you can select only one checkbox.

<script type="text/javascript">
function onlyOneCheckBox() {
    var checkboxgroup = document.getElementById('checkboxgroup').getElementsByTagName("input");
    var limit = 1;
    for (var i = 0; i < checkboxgroup.length; i++) {
        checkboxgroup[i].onclick = function() {
            var checkedcount = 0;
                for (var i = 0; i < checkboxgroup.length; i++) {
                checkedcount += (checkboxgroup[i].checked) ? 1 : 0;
            }
            if (checkedcount > limit) {
                alert("You can only select a maximum of " + limit + " checkbox.");
                this.checked = false;
            }
        }
    }
}
</script>

Thanks for your reading. Please leave a comment if you have any query.

I am a professional Web developer, Enterprise Application developer, Software Engineer and Blogger. Connect me on JEE Tutorials Twitter Facebook  Google Plus Linkedin Or Email Me

Leave a Reply

Your email address will not be published. Required fields are marked *