Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Auto Checked the Checkbox and Auto Display the Results When Checked
A checkbox is created by using the <input> tag with the type="checkbox" attribute (also called a tickbox). Users can select multiple options by checking one or more checkboxes. In HTML, the checkbox can be used alone or in conjunction with the "form" attribute. When the question or form is submitted, the data from the checked checkboxes is collected and saved in the backend.
The type attribute of the <input> element creates it, as shown in the following syntax:
<input type="checkbox" name="field name" value="Initial value">
Checkboxes with clickable labels are more usable. It allows users to toggle checkboxes on and off by clicking the labels. There are two ways to do this: wrap a <label> around the <input> element (checkbox), or use the for attribute to bind a <label> to the <input> element (checkbox).
This is a simple code for checkbox in HTML.
Example
<!DOCTYPE html>
<html>
<head>
<title> Checkbox in HTML </title>
</head>
<body>
<p> Display the result when the checkbox is checked: </p>
<label for= "checkbox1"> Checkbox: </label>
<input type= "checkbox" id= "checkbox1" onclick= "checkFunction()">
<p id= "text" style= "display: none"> The Checkbox is CHECKED! </p>
<script>
function checkFunction() {
var checkBox = document.getElementById("checkbox1");
var text = document.getElementById("text");
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
</script>
</body>
</html>
If we want the checkbox to be auto checked and auto display the result when the checkbox is checked, we can establish this by using either JavaScript or jQuery.
Using JavaScript
The checked attribute is boolean in nature. When present, it indicates that an <input> element should be pre-selected or checked when the page loads. The checked attribute can be used for both: checkboxes and radio buttons. The checked attribute can also be set after the page loads using JavaScript.
When an object is loaded, the onload event occurs. Onload is most commonly used within the <body> element to execute a script once a web page's entire content has been loaded (including images, script files, CSS files, etc.).
Example
In this example we will use the onload event with the body tag to call the init() function. The init() function is responsible to ensure that the checkbox is auto checked when the body loads. It makes use of the “checked” attribute to do so. The checkfunction which is responsible to display the result once the checkbox is checked, is called from within the init() function.
<!DOCTYPE html>
<html>
<head>
<title> How to auto checked the checkbox and auto display the results when checked </title>
<style>
body {
text-align: center;
background-color: seashell;
margin: 50px;
}
div {
padding: 10px;
height: 150px;
width: 500px;
background-color: tomato;
}
h3 {
color: navajowhite;
font-size: 20px;
}
p {
color: white;
font-size: 17px;
font-weight: bold;
}
label {
font-weight: bold;
}
</style>
</head>
<body onload= "init()">
<div>
<h3> Auto displaying the result when the checkbox is checked: </h3>
<label for= "checkbox1"> Checkbox: </label>
<input type= "checkbox" id= "checkbox1" onclick= "checkFunction()">
<p id= "text" style= "display: none"> This checkbox is auto checked! </p>
</div>
<script>
function init(){
var checkBox = document.getElementById("checkbox1");
checkBox.checked = true;
checkFunction();
}
function checkFunction() {
var checkBox = document.getElementById("checkbox1");
var text = document.getElementById("text");
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
</script>
</body>
</html>
Using jQuery
The .prop() method in JQuery only returns the property value for the first element in the matched set. It returns undefined if a property's value is not set or if the matched set contains no elements.
Example
In this example we will use the prop method of jQuery to get the checkbox’s id and using the checked attribute we ensure that the checkbox is automatically checked when the page loads. We use the same function as the previous example to display the result when the checkbox is checked.
<!DOCTYPE html>
<html>
<head>
<title> How to auto checked the checkbox and auto display the results when checked </title>
<style>
body {
text-align: center;
background-color: whitesmoke;
margin: 50px;
}
div {
padding: 10px;
height: 130px;
width: 500px;
background-color: thistle;
}
h3 {
color: midnightblue;
font-size: 18px;
}
p {
color: mediumvioletred;
font-size: 16px;
font-weight: bold;
}
label {
font-weight: bold;
}
</style>
</head>
<body>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<h3> Auto displaying the result when the checkbox is checked: </h3>
<label for= "checkbox1"> Checkbox: </label>
<input type= "checkbox" id= "checkbox1" onclick= "checkFunction()">
<p id= "text" style= "display: none"> This checkbox is auto checked! </p>
</div>
<script>
$('#checkbox1').prop('checked', true);
checkFunction();
function checkFunction()
{
if($('#checkbox1').prop("checked") == true)
{
$('#text').show();
}
else
{
$('#text').hide();
}
}
</script>
</body>
</html>
241 Views
