Wednesday, January 30, 2013

Check Box and Jquery

I was searching for code snippet to check status of checkbox through jquery, Here is what I figured out and it is very intresting.
Following is the Jquery you need to place in the <script> tag

<script>
$(document).ready(function()
{
$("#button2").click(function()
{
var isChecked = $("#check_1").attr('checked')?true:false;
if(isChecked)
{
$("#check_1").prop('checked',false);
}
else
{
$("#check_1").prop('checked',true);
}
}
);
}
);
</script>
Now HTML part
  • <input type="checkbox" id="check_1" ><\li>
  • <button type="button" id="button2" >I am button 2<button><\li>

Description of HTML Part


<input type="checkbox" id="check_1" >
we take Input type:checkbox and we will change its status on button click

<button type="button" id="button2" >I am button 2<button>
We define a button with the id button2. When we click the button this will change the checkbox status using above Jquery in <script> tag.

Jquery Description


$(document).ready(function()
The above line waits for the document to get downloaded.

$("#button2").click(function()
The above line detects if there is click on the button2

var isChecked = $("#check_1").attr('checked')?true:false;
if(isChecked)
{
$("#check_1").prop('checked',false);
}
else
{
$("#check_1").prop('checked',true);
}

The above code is executed when the button is clicked

$("#check_1").attr('checked')?true:false;
returns the current state of checkbox.

$("#check_1").prop('checked',false);
The above line makes the state false if checkbox is already checked.

$("#check_1").prop('checked',true);
The above line makes the state true if checkbox is already checked.

No comments: