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.
Syntax
Use HTML <input> tag with type=”checkbox”, it will show you checkbox.
<input type="checkbox">In this tutorial, you will learn about
HTML CheckBox Example
A simple example, many places you saw this form to fill your detail. Example registration form of
<!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
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
<!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
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
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:
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 MojaveCode: HTML 5 Version