Use JQuery To See If Checkbox Is Checked

jQuery makes it really easy to check on a checkbox and see if it is checked.

    if ( $("#theCheckbox").is ( ':checked' ) ) {
        $("#output").html("It is Checked");
    } else {
        $("#output").html("It <b>not</b> Checked");
    }

Will add the text to the element with an id of 'id'. You can use .html(…) to replace the contents.

A Complete Example (CheckBoxDemo.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" name="theNameForCheckbox" id="theCheckBox_ID">
<label for="theCheckBox_ID"> Click on the Checkbox or on this label. </label>

<div id="output"></div>

<script src="js/jquery-1.10.2.js"></script>

<script>

$(function(){
	$("#theCheckBox_ID").on('click',function(e){
		if ( $("#theCheckBox_ID").is ( ':checked' ) ) {
			$("#output").html("It is Checked");
		} else {
			$("#output").html("It <b>not</b> Checked");
		}
	});
});

</script>

</body>
</html>




•       •       •       •       •       •

Summary: # of Words: 90
Author: Philip Schlump
Published On: 2013-05-05

Download code from this articles in .tar.gz for Mac/Linux/Unix or .zip with CR/LF for Windows format.

 

Before You Go....

Have you read "Unintend Consinsequences"?

"I laughed so hard it hurt..."
    Rod Brown

"Incredibly funny! Incredibly true!"
    Tad Stevens