Last updated December 15, 2010. Created on February 6, 2007.
Edited by kaldari, tapughose, aj045, rszrama. Log in to edit this page.

A simple way to tell if a checkbox has been checked using jQuery is with the :checked CSS "pseudo class." Your selector should use the following syntax:

$('#edit-checkbox-id:checked')

Obviously, you need to replace checkbox-id with the actual name of the form element. This will attempt to grab any checked checkbox with that ID. If none are found, the result set will be null. So, combining this with jQuery's .val() method, you can use the following conditional statement to execute code if a checkbox has been checked:

if ($('#edit-checkbox-id:checked').val() !== undefined) {
  // Insert code here.
}

(Note: the checkboxes element in the Forms API produces unique IDs for each option. View the source to see what I mean.)

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

nevets’s picture

If you want to only do something to elements that are selected as in this case (here we want to do something if the checkbox is checked) you can simplify the code to

$('#edit-checkbox-id:checked'),each(
  function() {
   // Insert code here
  }
);

and the function will only run if the checkbox with the selected id is checked.

If you use a selector that can return more than one element, the function is applied each of the matching elements (one at a time), so

$("input[@type=checkbox][@checked]").each(
  function() {
   // Insert code here
  }
);

will run the function for each checkbox that is checked.

uzbekjon’s picture

Liked your second method that iterates though checked checkboxes. For those who are using drupal 7 with jQuery 1.3 the second method will look like this:

$("input[type=checkbox][checked]").each(
  function() {
   // Insert code here
  }
);

I had hard time with that code not working and then came accros this article on checking if checkbox is checked.

-------------------------------
Read jQuery tutorials & tips at jQuery HowTo Collection

guusvandewal’s picture

$('#edit-submitted-ik-heb-een-vraag-of-opmerking-ik-heb-een-vraag-of-opmerking-check-yes').change(function () {
$('#edit-submitted-ik-heb-een-vraag-of-opmerking-ik-heb-een-vraag-of-opmerking-check-yes:checked').each(
  function() {
   console.log('check');
  });
  });

Replace #edit-submitted-ik-heb-een-vraag-of-opmerking-ik-heb-een-vraag-of-opmerking-check-yes with your element id

Another way

function countChecked() {
      var n = $("input:checked").length;
    
        if (n == 0){
       //console.log('hide');
          $("#edit-submitted-ik-heb-een-vraag-of-opmerking-vraagopmerking-wrapper").css('display','none');
       }else if (n==1){
       //console.log('show');
        $("#edit-submitted-ik-heb-een-vraag-of-opmerking-vraagopmerking-wrapper").fadeIn("slow");
       }
      
    }
    countChecked();
    $(":checkbox").click(countChecked);
tom friedhof’s picture

I couldn't get the method you mentioned to work in IE. The following jquery string will return a boolean in both firefox and IE:

$('#edit-checkbox-id').is(':checked');
brettryan’s picture

I believe this is the most correct solution and is understandably the most readable solution.

Keith Marran’s picture

Another method is to retrieve the "checked" attribute:

if ($('#checkbox').attr('checked')) {
     // do something
}
brettalton’s picture

Has something changed since jQuery 1.2.x?

I've tried:

// once, per page load
if ($('#edit-checkbox-id:checked').val() !== null)
{
alert('1');
}
// never
$('#edit-checkbox-id:checked').each(function()
{
alert('2');
}
);
// once, per checkbox that is already checked, per page load
$("input[@type=checkbox][@checked]").each(function()
{
alert('3');
}
);
//never
if ($('#edit-checkbox-id').is(':checked'))
{
alert('4');
}
//never
if ($('#edit-checkbox-id').attr('checked'))
{
alert('5');
}

and none of them work when I check '#edit-checkbox-id' ON.

cdale’s picture

I think you now need to use the following syntax, at least this works for me.

if ($('#edit-checkbox-id').is(':checked'))
{
  alert('1');
}
AlexisWilke’s picture

I have jQuery 1.5.x and this works perfectly. 8-)

Also, to get the changing flag, using the .change() event works great.

$('#edit-checkbox-id').change(my_tracking_function);

Alexis Wilke
Made to Order Software Corporation
http://www.m2osw.com/
http://snapwebsites.com/
http://snapwebsites.org/

pingers’s picture

I had to use !=, rather than !==.

phpaddict’s picture

Ya Not Identical Operator doesn't work at all because the return value is string "on". Has to use not equal operator.

Biscione’s picture

The best solution!

thx

alvaroguimaraes’s picture

value is 'undefined' if is not checked.
so...

if ($('#checkbox-id:checked').val() !== undefined) {
// stuff here
}

Álvaro Guimarães
Santa Bárbara D´Oeste - SP - Brasil

giorgio79’s picture

As per subject

MasonW’s picture

Hey, I'm using if statements for checkboxes placed after e-mail addresses to send a copy of the form to the father personal, mother personal, father business, mother business, etc. However, since it passes to a hidden input field, it will only send to one address per submission. I was thinking that building an array of addresses passed as a string separated by commas would work, but am not sure how to implement that.

An example of the IFs I have been using below:

if ($('#sendFatherPersonalEMail:checked').val() !== null) { //Father Personal
    $(function() {
$("#father_eMail").change(function() {
var newContactEmail = $(this).val();
$("#cc").val(newContactEmail);
});
});
}

if ($('#sendFatherBusEMail:checked').val() !== null) { //Father Business
    $(function() {
$("#father_busEMail").change(function() {
var newContactEmail = $(this).val();
$("#cc").val(newContactEmail);
});
});
}

etc.

Suggestions?