---

Search posts under HTML5:

---

Check box in HTML5

How to create different check boxes using <input> elements in HTML5?

Check box

Check box in HTML is an <input> element which allows user to select one or more options from a set of alternatives.

The check boxes mostely used in application forms while selecting the Gender, Nationality, Blood group, Caste...  etc.

NOTE: If we want to select only one option, we can use radio button.

Creating check box

<form>
   <h3>Check box</h3>
   Click here if yes, other wise dont click <input type="checkbox" name="chcbox1"/> &nbsp
</form>

In the above code snippet we create an check box by using <input> element, for creating check box we have given value "checkbox" (Check box value) to the type attribute.

OUTPUT

Creating Check box group

Checkbox group is nothing but allowing the user to select one or more options.

<form>
    <h3>Group Checkboxes</h3>
    <input type="checkbox" name="chcbox1" />
    Bike 
   <input type="checkbox" name="chcbox1" />
    Car
   <input type="checkbox" name="chcbox1" />
    Heavy vehicle
</form>

Checkbox group

We created a group of checkboxes for allowing the user to select more options.

OUTPUT

Creating Checked check box

Checked is an attribute which is used for the automatic selection of the checkbox.

<form>
    <h3>Checked Checkboxes</h3>
    <input type="checkbox" name="chcbox1" />
    Bike 
   <input type="checkbox" name="chcbox1" checked/>
    Car
   <input type="checkbox" name="chcbox1" checked/>
    Heavy vehicle
</form>

Checked check box

We used checked attribute for 2^nd and 3^rd checkbox, so that in the output we can find that 2^nd and 3^rd checkbox is automatically selected.

OUTPUT

Checking check boxes using JavaScript in HTML

<form>
    <h3>Checked Checkboxes automatically using JavaScript in HTML.</h3>
    <input type="checkbox" id="Check" />
    <input type="button" value="Check" onclick="myCheck()" />
    <input type="button" value="Uncheck" onclick="myUncheck()" />
</form>

<script>
    function myCheck() {
        document.getElementById("Check").checked = true;
    }

    function myUncheck() {
        document.getElementById("Check").checked = false;
    }
</script>

Checking check boxes using JavaScript

We are checking and unchecking the check box by using script code in the HTML page.

Onclick of the "Check" button fires the function myCheck() in the script code at the same time document.getElementById checked the check box.

Onclick of the "Uncheck" button fires the function myUncheck() in the script code at the same time document.getElementById uncheck the checked check box.

OUTPUT