To check the check box we can use the .attr() property and we can set the checked property of the checkbox to true , but it not support invert of it means if we want to do the uncheck that checkbox again. There is another function .prop() of jquery which will be used to check or uncheck the checkbox using the jquery.

Jquery uncheck checkbox function is similar to the function like check checkbox using jquery. There are many more tutorial you will find on the internet but i have written its original code done my self and every one can understand this code in pure jquery language.

If you are chart library lover and want the list of free chart library then you can find the other post JavaScript chart library and I know that will be very helpful to display long data report into simplified way using charts.

We can use the checked property of the checkbox to check uncheck but the problem of using that it first work but after uncheck checkbox it’s not work again means the checkbox remain unchecked again when we use the checked property. If you want to see how we can do that using checked property see below syntax but it only allow to check the checkbox first time

Syntax:

$(‘#chkbox1’).attr(‘checked’, ‘checked’);

How to check or uncheck checkbox in jquery?

The following syntaxs are used to check or uncheck the checkbox using the jquery. See the comment written after the each syntax.

Syntax:

$(‘#chkbox1’).prop(‘checked’, true); // this will Check the checkbox

$(‘#chkbox1’).prop(‘checked’, false); // this will Uncheck the checkbox

In above syntax we first get the checkbox1 control using the $(‘#chkbox1’) syntax of jquery.

But to implement this you required the some function call on button or any input click, so here i am writing the full example of check uncheck checkbox using jquery.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>Check Uncheck Checkbox Jquery</title>

<script src=”http://code.jquery.com/jquery-1.10.2.min.js” type=”text/javascript”></script>

<style>

body{ font-family:Verdana, Geneva, sans-serif}

</style>

</head> <body>

<div style=”width:450px;height:200px;margin:auto;padding:50px;border:solid 1px #999;”>

<form >

<h2>Check Uncheck Checkbox Using Jquery</h2>

<p><input type=”checkbox” id=”chk1″ value=”Mango”> Mango</p>

<p><input type=”checkbox” id=”chk2″ value=”Apple”> Apple</p>

<p><input type=”checkbox” id=”chk3″ value=”Bannana”> Bannana</p>

<p><input type=”button” value=”Check” onclick=”return check(this);”>

<input type=”button” value=”Uncheck” onclick=”return uncheck(this);”></p>

</form>

</div>

<script type=”text/javascript” language=”JavaScript”>

<!–

function check()

{

$(‘#chk1’).prop(‘checked’, true); // Check it

$(‘#chk2’).prop(‘checked’, true); // Check it

$(‘#chk3’).prop(‘checked’, true); // Check it return false;

} function uncheck()

{

$(‘#chk1’).prop(‘checked’, false); // Uncheck it

$(‘#chk2’).prop(‘checked’, false); // Uncheck it

$(‘#chk3’).prop(‘checked’, false); // Uncheck it return false;

}

//–>

</script> </body> </html>