Skip to content

HTML CheckBox Label | Checked Value, Group, Disable, onclick, onchange, and Example

  • by

HTML CheckBox Label is used to giving a selected option to the user. Where a user can select any one of them. Like a select the gender, then you can give an option to user – Male or Female. Based on the selected option you can get the value from the checkbox.

HTML CheckBox Label Checked Value, Group, Disable, onclick, onchange, and  Example

Syntax

Use HTML <input> tag with type=”checkbox”, it will show you checkbox.

<input type="checkbox">

In this tutorial, you will learn about every thing of HTML CheckBox Label. How to use it, set and get the value from the CheckBox, what if the CheckBox is not checked? Grouping of Checkbox, Is it possible to do Single or multiple selections. Also How to disable and perform onClick event on the CheckBox button in HTML with an examples.

HTML CheckBox Example

A simple example, many places you saw this form to fill your detail. Example registration form of facebook.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>

    <h2>Check Box</h2>

    <p> HTML checkbox examples : Select your gender</p>
    <input type="checkbox" name="genderM" value="Male"> Male <br>
    <input type="checkbox" name="genderF" value="Female"> Female<br>
            
    </body>
</html>

Checked CheckBox

Here is an example, how you can do html checkbox checked (pre-selected). Just use a checked attribute in the input tag.

<input type="checkbox" name="genderM" value="Male" checked=""> Male <br>

HTML checkbox Checked/Unchecked

As you know HTML check box have 2 state, checked and Unchecked. It’s a simply have True or False for it. It required to know the state of HTML checkbox unchecked or checked. Let’s see the example of it how you can get the validate checkbox.

You have to use a HTML CheckBox onclick attribute for that. Don’t forget to add unique id to every element.

You will <script> tag with some function. This is a JavaScript, we will learn about in a different tutorial.

<!DOCTYPE html>
<html>
    <head>
        
    </head>
    <body>

    <h2>Check Box</h3>

    <input type="checkbox" id="tc" value="tc" onclick="myFunction()"> Agree with Terms and Conditions </input>
    <p id="text" style="display:none">Checkbox is CHECKED!</p>
    
    <script>
        function myFunction() {
            var checkBox = document.getElementById("tc");
            var text = document.getElementById("text");
            if (checkBox.checked == true){
                text.style.display = "block";
            } else {
                text.style.display = "none";
            }
        }
    </script>

    </body>
</html>

Output: A GIF output of upper example

HTML CheckBox Label Checked Value, Group, Disable, onclick, onchange, and  Example

Get The value from CheckBox

Getting the value of Checkbox either it’s checked or not. You have to define it in a form tag then input with a value of it. See the below example How to get the HTML CheckBox checked value and HTML CheckBox value if not checked.

In the example we are using a button type ( to perfomat action), javascript and if condition statement. If Checkbox is checked the only value of it show in the alert box.

<!DOCTYPE html>
<html>
    <body>

    <h2>Get Checkbox value</h2>

    <input type="checkbox" id="m" value="male"> Male

    <button onclick="display()">Display Value</button>
    <script>
        function display() {
            if (document.getElementById("m").checked){
            var x = document.getElementById("m").value;
            }
            alert("The value of the checkbox is: " + x);
        }
    </script>
    </body>
</html>

Output: In A GIF

value from HTML CheckBox checked example

HTML CheckBox Group

If you want a Multiple HTML checkboxes, you can do it but here is some conditions. Like in a group if you want select only on value then it’s hard way to do it with a CheckBoxs.

The better ways is do it with Radio Label (button).

  • Grouping Radio buttons
  • Act like Radio
  • Allow unselecting all

Examle 1. HTML checkbox group single selection

For it you need first add java script source in <head> tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Then do like below example.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>

    <h2>Allow Only One Checkbox to be Checked</h2>

    <input type="checkbox" name="m" value="male"> Male
    <input type="checkbox" name="f" value="female"> Female
    <input type="checkbox" name="o" value="other"> Other
        
        <script>
            $(document).ready(function(){
                $('input:checkbox').click(function() {
                    $('input:checkbox').not(this).prop('checked', false);
                          });
            });
        </script>

    </body>
</html>

Output: In GIF

HTML checkbox group single selection example output

Example 2. HTML checkbox group multiple selections.

A very simple example, not need to do use java script.

<!DOCTYPE html>
<html>
    <body>

    <h2>Allow multiple Checkbox to be Checked</h2>

    <input type="checkbox" name="m" value="male"> Male
    <input type="checkbox" name="f" value="female"> Female
    <input type="checkbox" name="o" value="other"> Other
        

    </body>
</html>

Output:

HTML checkbox group multiple selections example output output

Disabled CheckBox

How HTML checkbox disabled? and why? Just Write a “disabled” attribute to not allow input. It is used when your item of selection is generated after some selection like a choice for Veg and non-veg. Then according to choice just disable those checkboxes.

See the below simple example of it. You have doubt on terms- Attribute, elements, and Tag. Then follow this tutorial- HTML Basic | Definition | Tags and attributes | Elements

<input type="checkbox" id="tc" value="tc" disabled> Agree with Terms and Conditions </input>

HTML checkbox onchange 480


HTML checkbox required almost every web application to make the user experience better. If you have any doubt and suggestion then do comment in below.

Note: The All HTML CheckBox Button Examples are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave

Code: HTML 5 Version

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading