Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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. Users can select multiple options by checking one or more checkboxes. In many scenarios, you may want a checkbox to be automatically checked when the page loads and display results immediately, which can be achieved using JavaScript or jQuery.
Syntax
Following is the basic syntax for creating a checkbox
<input type="checkbox" name="fieldName" value="value" id="uniqueId">
To make a checkbox auto-checked, add the checked attribute
<input type="checkbox" name="fieldName" value="value" id="uniqueId" checked>
Basic Checkbox Example
Checkboxes with clickable labels are more user-friendly. You can wrap a <label> around the checkbox or use the for attribute to bind the label to the checkbox input.
Example
Following example shows a basic checkbox that displays a message when checked
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<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; color: green; font-weight: bold;">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>
The output displays a checkbox with a label. When checked, it shows the confirmation message
Display the result when the checkbox is checked: Checkbox: ? The Checkbox is CHECKED!
Auto-Checking Using JavaScript
The checked attribute is boolean in nature. When present, it indicates that an input element should be pre-selected when the page loads. You can also set this programmatically using JavaScript after the page loads.
The onload event occurs when an object is loaded. It is commonly used within the <body> element to execute a script once the entire page content has loaded, including images, scripts, and CSS files.
Example
Following example uses the onload event to automatically check the checkbox and display the result when the page loads
<!DOCTYPE html>
<html>
<head>
<title>Auto-Check Checkbox with JavaScript</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f8ff;
padding: 20px;
}
.container {
padding: 20px;
width: 400px;
margin: 0 auto;
background-color: #ff6347;
border-radius: 8px;
color: white;
}
h3 {
color: #ffe4b5;
font-size: 18px;
margin-bottom: 15px;
}
p {
font-size: 16px;
font-weight: bold;
margin: 10px 0;
}
label {
font-weight: bold;
margin-right: 10px;
}
</style>
</head>
<body onload="init()">
<div class="container">
<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>
When the page loads, the checkbox is automatically checked and the message appears immediately
Auto displaying the result when the checkbox is checked: Checkbox: ? This checkbox is auto checked!
Auto-Checking Using jQuery
The .prop() method in jQuery gets or sets properties for the first element in the matched set. For checkboxes, you can use .prop('checked', true) to automatically check them and .prop('checked') to get the current state.
Example
Following example uses jQuery's prop() method to auto-check the checkbox and display the result
<!DOCTYPE html>
<html>
<head>
<title>Auto-Check Checkbox with jQuery</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f5f5f5;
padding: 20px;
}
.container {
padding: 20px;
width: 400px;
margin: 0 auto;
background-color: #d8bfd8;
border-radius: 8px;
}
h3 {
color: #191970;
font-size: 18px;
margin-bottom: 15px;
}
p {
color: #c71585;
font-size: 16px;
font-weight: bold;
margin: 10px 0;
}
label {
font-weight: bold;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="container">
<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>
$(document).ready(function() {
$('#checkbox1').prop('checked', true);
checkFunction();
});
function checkFunction() {
if ($('#checkbox1').prop("checked") == true) {
$('#text').show();
} else {
$('#text').hide();
}
}
</script>
</body>
</html>
The jQuery version automatically checks the checkbox and displays the message when the page is ready
Auto displaying the result when the checkbox is checked: Checkbox: ? This checkbox is auto checked!
Using HTML checked Attribute
The simplest way to auto-check a checkbox is by adding the checked attribute directly in the HTML. This approach doesn't require JavaScript but won't automatically display results.
Example
Following example shows the HTML-only approach combined with JavaScript for result display
<!DOCTYPE html>
<html>
<head>
<title>HTML Checked Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;" onload="checkFunction()">
<h3>Checkbox auto-checked using HTML attribute:</h3>
<label for="checkbox1">Pre-checked Checkbox:</label>
<input type="checkbox" id="checkbox1" checked onclick="checkFunction()">
<p id="text" style="display: none; color: blue; font-weight: bold; margin-top: 10px;">Checkbox was pre-checked in HTML!</p>
<script>
function checkFunction() {
var checkBox = document.getElementById("checkbox1");
var text = document.getElementById("text");
if (checkBox.checked) {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
</script>
</body>
</html>
The checkbox appears pre-checked and the result message displays immediately on page load
Checkbox auto-checked using HTML attribute: Pre-checked Checkbox: ? Checkbox was pre-checked in HTML!
Comparison of Methods
Following table compares the different approaches for auto-checking checkboxes
| Method | Auto-Check | Auto-Display | Complexity | Best Use Case |
|---|---|---|---|---|
HTML checked
|
2K+ Views
