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 the Author

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

Comments

Leave a Reply

avatar
newest oldest most voted
mady
Guest
mady

very bad

gh4343
Guest
gh4343

fghghfghfg

Arun
Guest
Arun

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
Guest
John

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

jerald
Guest
jerald

thanks

Adex
Guest
Adex

THX for save my life!

Rudy S
Guest
Rudy S

Thank’s :D
Very HelpFull

Prabu karana
Guest
Prabu karana
satyendra
Guest
satyendra

You examples are very nice and simple

uzma Abbasi
Guest
uzma Abbasi

very well done.nice job.

B
Guest
B

Thanks!

Jigar Shah
Guest
Jigar Shah

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.

AntGuider
Guest
AntGuider

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