Create A HTML Checkbox With A Clickable Label

There are 2 ways to do this.

First you can use the for attribute on the label. Note that the for refers to the ID of the input field, not the name. I have noticed people using the name field on a number of forms. That will not work.

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

The alternative is to wrap the input type="checkbox" inside the label tag.

<label>
    <input type="checkbox" name="checkbox" value="value">
    The Label for the Checkbox
</label>


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: 160
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