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>
Tags :

About the Author

mkyong
Founder of Mkyong.com and HostingCompass.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

  • http://zealfire.zz.mu/ Prabu karana
  • http://www.encodedna.com 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.

  • http://netsutra.com satyendra

    You examples are very nice and simple

  • uzma Abbasi

    very well done.nice job.

  • http://www.antguider.blogspot.com/ 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

  • B

    Thanks!

  • http://jigarshah.net 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.