html checkbox

Using checkbox in webpages
One object of HTML is used as input element to let website visitors to select ZERO or MORE options for any number of choices, this input Object type is "checkbox" and simply created with <input type="checkbox"> tag in HTML like this:

1	<input type="checkbox">

we can write a label for this checkbox after the HTML code and assign a value for the checkbox for example value="Blue"

1	<input type="checkbox" id="test_color" value="Blue">I like Blue page.

I like Blue page.
by clicking on the checkbox the checked value for this object will be true, but value of the object will remain "Blue" whether checked or not.

Using label text to check or uncheck the checkbox
if you want to bind between the checkbox object and the text beside the object so any click on the text will make the same effect as click on the checkbox.

1 2	<input type="checkbox" id="test_color" value="Blue"> <label for="test_color">I like Blue page.</label>

1
2
3

<label for="test_color">
   <input type="checkbox" id="test_color" value="Blue">I like Blue page.
</label>

I like Blue page.

Checkbox Properties:
The following are the list of most properties that can be used to get and alter checkbox properties in javascript.

checked: Boolean property that reflects the current state of the checkbox, "true" if it's checked, and "false" if not.

1	<input type="checkbox" id="test_color" value="Blue" checked>I like Blue page.

I like Blue page.

disabled: Boolean value that sets/ returns whether the checkbox is disabled.

1	<input type="checkbox" id="test_color" value="Blue" checked disabled>I like Blue page.

I like Blue page.

name: Reflects the name of the checkbox.
value: A read/write string that specifies the value of the checkbox.

<input type="checkbox" id="test_color" value="Blue" name="color1">I like Blue page.

<script>
  alert(color1.value);
  alert(color1.name);
</script>

the result will be an alert message indicates that the value=blue and name=color.

onClick event:
One most event used for checkbox is onClick so Code will executed when user clicks on the checkbox.

<input type="checkbox" name="color1" onclick ="my_function();">I like Blue page.

<script>
function my_function(){
 alert("the status checked for color1 is " + color1.checked);
}
</script>