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 itreturn false;
}function uncheck()
{
$(‘#chk1’).prop(‘checked’, false); // Uncheck it
$(‘#chk2’).prop(‘checked’, false); // Uncheck it
$(‘#chk3’).prop(‘checked’, false); // Uncheck itreturn 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?
