Last updated December 15, 2010. Created by tapughose on February 6, 2007.
Edited by kaldari, 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.)
Comments
The example can be simplified
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.
For jQuery 1.3
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
To make it check every time you uncheck or check the box.... ;)
$('#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);
I couldn't get the method
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');I believe this is the most
I believe this is the most correct solution and is understandably the most readable solution.
Another method
Another method is to retrieve the "checked" attribute:
if ($('#checkbox').attr('checked')) {// do something
}
jQuery 1.2.x
Has something changed since jQuery 1.2.x?
I've tried:
// once, per page loadif ($('#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');
}
);
//neverif ($('#edit-checkbox-id').is(':checked'))
{
alert('4');
}
//neverif ($('#edit-checkbox-id').attr('checked'))
{
alert('5');
}
and none of them work when I check '#edit-checkbox-id' ON.
jQuery 1.2.x
I think you now need to use the following syntax, at least this works for me.
if ($('#edit-checkbox-id').is(':checked')){
alert('1');
}
is(':checked')
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.info/
I had to use !=, rather than
I had to use !=, rather than !==.
Ya Not Identical Operator
Ya Not Identical Operator doesn't work at all because the return value is string "on". Has to use not equal operator.
The best solution! thx
The best solution!
thx
value is 'undefined' if is
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
How to do it in php?
As per subject
****Me and Drupal :)****
Clickbank IPN - Sell online or create a membership site with the largest affiliate network!
Review Critical - One of my sites
University New Student Form
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?