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.
