Check if any checkboxes are selected in jQuery

19 August, 2014 by Tom Elliott

Here’s a handy jQuery function that will loop through all checkboxes in a given form to see if they have been checked or not. A boolean variable anyBoxesChecked is first set and we use jQuery’s .each() function to loop through each checkbox using the input[type="checkbox"] selector.

If one or more checkboxes are checked (using .is(":checked")) then the anyBoxesChecked variable is set to true. If no checkboxes are selected, we can trigger an action such as an alert message.

function checkChecked(formname) {
    var anyBoxesChecked = false;
    $('#' + formname + ' input[type="checkbox"]').each(function() {
        if ($(this).is(":checked")) {
            anyBoxesChecked = true;
        }
    });

    if (anyBoxesChecked == false) {
      //Do something
    } 
}

To use the JavaScript function, just pass the ID of the form that has the checkboxes in, for example if a form has the ID ‘searchform’, we can use:

checkChecked('searchform');

Being able to target a specific form can be useful if you have multiple forms with checkboxes on the same page.

Checking selected checkboxes on form submit

This checkbox selected function can be easily modified to be used in conjunction with a form submit, as we can see in the JavaScript below. If all checkboxes have been left blank, a ‘Please select at least one checkbox’ alert will appear, otherwise the form will be submitted.

function checkChecked(formname) {
    var anyBoxesChecked = false;
    $('#' + formname + ' input[type="checkbox"]').each(function() {
        if ($(this).is(":checked")) {
            anyBoxesChecked = true;
        }
    });

    if (anyBoxesChecked == false) {
      alert('Please select at least one checkbox');
      return false;
    } 
}

The form tag in your HTML should look something like the below, with the checkChecked function being called on the form’s ‘onsubmit’ trigger.

<form id="searchForm" name="searchForm" method="GET" action="" onsubmit="return checkChecked('searchForm');">

This jQuery checkbox checking function has been tested in IE 8 – IE 11, FireFox and Chrome.



JavaScript Function to Check\Uncheck all Checkboxes »


6 Comments

  • Roland says:

    Thank you for this Code! It is what I am looking for but a variation of this. I have several checkboxes on my form but I do not want all the checkboxes to be triggered. What I want to achieve is this:
    1. Have the 3 checkboxes Hide the data
    2. Once either one of the boxes unchecked then its data is displayed
    3. Have the checkbocxes independent of each other, that is, if one is checked it should not affect the other two.

    Thanks in advance for your help.

  • Elsa says:

    Hi, thanks for your code! I’m using 2 separated divs for the checkbox and submit table. How can I handle with that? I mean, the checkboxes are shown in one div, and the button is in another div. This stumbled me. Please help me with this question. Very appreciated!

  • Semmy says:

    I have check boxes with same id “RoleType_1” how can i loop all the check boxes with same id.

  • Rohit says:

    Thanks for this. 🙂

  • Dheeraj says:

    Thanks for this clean script!

  • toj says:

    thanks!!

  • Leave a Reply

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

    css.php