Tag Archives: Selectors

Use jQuery to check if a checkbox is checked

7 Replies

while working on a project (how else do these things come to mind right? :P ) I was looking for a way to check if a checkbox is checked or not.  The issue that I had was that the checkbox was ajax loaded (along with other content) so I needed to check on focus (Edit: I have since started using .change() instead of .focus() since an element can loose focus without changing states).  Here’s what I came up with (placing this inside the ajax loaded content, now yes there is other ways of doing this such as using .live() but this method is for the sake of this example):

	
$('.check_box_class_name').change(function(){
		if($(this).is(':checked')){
			//do something.
		}else{
			//do something else.
		}
	});

by doing this, it allows me to check when ever this element is focused changes it’s state if it’s checked or not. Now, it may not make sense to some thinking that focused elements are checked? false. an example would be clicking the check box while it’s checked (to uncheck it), by doing this you are still focusing the element (though unchecking it). So this is why I do an actual check every time I focus the element. In the past I used .focus() but then later discovered that it is more reliable to use .change() because focus does not care what the actual state of the element is in. .change() is only triggered when there is a change to the element, which is what we are looking for when working with checkboxes.

if you want to check if it’s checked on page load, simply do this:

	
if($('.check_box_class_name').is(':checked')){
		//do something.
	}else{
		//do something else.
	}

You get the idea.

Edit: ok so I was asked for a real example so here it is.

The HTML:

<form>
	<input type="checkbox" name="some_name" value="1" class="some_class">
	<input type="checkbox" name="some_name" value="2" class="some_class">
	<input type="checkbox" name="some_name" value="3" class="some_class">
	<input type="submit" value="Submit">
	<div class="result"></div>
</form>

The JS

$(document).ready(function() {
	$('.check_box_class_name').change(function(){
		var theValue = $(this).val();
		if($(this).is(':checked')){
			$('.result').html('You have checked the checkbox with the value of: '+theValue);
		}else{
			$('.result').html('You have unchecked the checkbox with the value of: '+theValue);
		}
	});
});