How to check / unchecked a checkbox with jQuery

In jQuery, you can use attr() function to check or unchecked a checkbox dynamically. For example,

A simple checkbox component.


<input type="checkbox" name="checkme">Check Me</input>

1. To display whether this checkbox is checked or not (return true or false).


$('input:checkbox[name=checkme]').is(':checked');

2. To check a checkbox.


$('input:checkbox[name=checkme]').attr('checked',true);

3. To uncheck a checkbox.


$('input:checkbox[name=checkme]').attr('checked',false);

jQuery check / unchecked checkbox example


<html>
<head>
<title>jQuery check / uncheck a check box example</title>
 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

</head>

<body>

<h1>jQuery check / uncheck a check box example</h1>

<script type="text/javascript">

  $(document).ready(function(){

    $("#isCheck").click(function () {
		
	alert($('input:checkbox[name=checkme]').is(':checked'));
			
    });
	
    $("#checkIt").click(function () {
		
	$('input:checkbox[name=checkme]').attr('checked',true);
			
    });
	
    $("#UnCheckIt").click(function () {
		
	$('input:checkbox[name=checkme]').attr('checked',false);
			
    });	
		
  });
</script>
</head><body>

<input type="checkbox" name="checkme">Check Me</input>

<br/>
<br/>
<br/>

<input type='button' value='Is Check' id='isCheck'>
<input type='button' value='Check It' id='checkIt'>
<input type='button' value='UnCheck It' id='UnCheckIt'>

</body>
</html>

mkyong

Founder of Mkyong.com, passionate Java and open-source technologies. If you enjoy my tutorials, consider making a donation to these charities.

14 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
mady
12 years ago

very bad

gh4343
9 years ago
Reply to  mady

fghghfghfg

Arun
12 years ago

Really nice article. I am sharing another article which too discusses about checking and un-checking a group of checkboxes defined inside a class. But this article uses the ‘.prop()’ function instead of ‘.attr()’ function. Please check it and let us know if it has helped you.

http://www.encodedna.com/2013/06/check-uncheck-checkbox-using-jquery.htm

Reviews awaited.

John
12 years ago
Reply to  Arun

Thanks. This only worked 1 time with .attr(), but works as in the above demo with .prop() 🙂

B
13 years ago

Thanks!

Lalita
6 years ago

thanks

Adex
12 years ago

THX for save my life!

Rudy S
12 years ago

Thank’s 😀
Very HelpFull

Prabu karana
12 years ago
satyendra
13 years ago

You examples are very nice and simple

uzma Abbasi
13 years ago

very well done.nice job.

jerald
11 years ago

thanks

AntGuider
13 years ago

Hi,
This is a nice example. You can Refer this article for
How to check a checkbox is checked using jQuery” in different ways

Jigar Shah
14 years ago

With struts2 rendered check boxes it does nto work…since they are sending hidden values -checkboxes…which do not change if u have hidden and now visible checkboxes.