CHECK UNCHECK CHECKBOX USING JQUERY


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.

check uncheck checkbox in 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>




If you require the check uncheck checkbox without accessing its individual name then we can do it using by the jquery loop or by accessing the all elements by it same class name applied to each checkbox. Assume we have already theclass=’chkgroup’ in each checkbox and we need to do check or uncheck checkbox then find the following syntax.

$(‘.chkgroup’).prop(‘checked’, true);  // check all checkbox
$(‘.chkgroup’).prop(‘checked’, false);  // Uncheck all checkbox

If you also want to learn or get information about to get selected value of chekcbox using jquery then you don;t miss the my other good and complete tutorial of  How to get selected value of checkbox in Jquery?



Kalpesh Patel

Founder Of Nexus Software Group Leading IT solution and service provider and offering a full range of application development and I.T. consultancy services. Nexus Software Group Contributors In: post free ads online in India and post free ads online in USA