Main Tutorials

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>

About Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
14 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
mady
10 years ago

very bad

gh4343
6 years ago
Reply to  mady

fghghfghfg

Arun
10 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
10 years ago
Reply to  Arun

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

B
11 years ago

Thanks!

Lalita
3 years ago

thanks

Adex
9 years ago

THX for save my life!

Rudy S
10 years ago

Thank’s 😀
Very HelpFull

Prabu karana
10 years ago
satyendra
11 years ago

You examples are very nice and simple

uzma Abbasi
11 years ago

very well done.nice job.

jerald
9 years ago

thanks

AntGuider
11 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
12 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.