How to Display Text When Checkbox Is Checked in JavaScript
-
Use JavaScript
.checkedProperty to Display Text When Checkbox Is Checked -
Use jQuery
is()Function and JavaScript.checkedProperty to Display Text When Checkbox Is Checked -
Use jQuery
readyandclickEvents to Display Text When Checkbox Is Checked
This article introduces you to the different techniques to display text when the checkbox is checked in JavaScript. It also educates you about JavaScript and jQuery functions and events.
Use JavaScript .checked Property to Display Text When Checkbox Is Checked
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Checkbox</title>
</head>
<body>
<p>Let see how to know if check box is checked:</p>
<label for="check">Checkbox:</label>
<input type="checkbox" id="check" onclick="checkfunction()">
<p id="message" style="display:none">Checkbox is Checked Now!</p>
</body>
</html>
JavaScript Code:
function checkfunction() {
var check = document.getElementById('check');
var message = document.getElementById('message');
if (check.checked == true) {
message.style.display = 'block';
} else {
message.style.display = 'none';
}
}
Output:
The code given above gets the elements by targeting their id’s values, check and message. Then, it checks if the value of check.checked is true or false.
If it is true, it displays the message stored in the message variable. However, the .checked is a Boolean property that can be either true or false.
We can use this property within pure JavaScript and combine it with the jQuery function.
Rather than displaying the message on the window to tell whether the checkbox is checked or not, we can use the alert function to show a popup message in the browser. You can replace your JavaScript code with the following to practice.
JavaScript Code:
function checkfunction() {
if ((document.getElementById('check')).checked) {
alert('The checkbox is checked');
} else {
alert('The checkbox is not checked')
}
}
Output:
Use jQuery is() Function and JavaScript .checked Property to Display Text When Checkbox Is Checked
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Checkbox Practice</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" id="check"> Check it and Submit
<button onclick="checked()"> Submit </button>
</body>
</html>
JavaScript Code:
function checked() {
if ($('#check').is(':checked')) {
alert('Checked');
} else {
alert('Not Checked');
}
}
Output:
The checked() method gets executed in the code given above if you click on the button titled Submit. This method gets the first element whose id attribute’s value is check.
Further, it checks if the element’s checked property is true or false. How? Here, the is() function checks if the selected element matches the selector element.
The is() function checks the current element with the other element; it can be a selector or a jQuery object.
The is() method takes two parameters, one is mandatory, and the other is optional (the selectorElement is mandatory, and the function(index, element) is optional). This function returns true if the condition fulfills false.
Keep in mind that $ is acting like document.getElementById here. The above code will show Checked if the checkbox will be checked; otherwise, Not Checked.
Use jQuery ready and click Events to Display Text When Checkbox Is Checked
HTML Code:
<html>
<head>
<title>practice ready and click events</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" id="check"> Check it
</body>
</html>
JavaScript Code
$(document).ready(function() {
$('input').click(function() {
alert('You checed....');
});
});
Output:
The ready and click are jQuery Events used in JavaScript.
The ready event happens when the document object model (DOM) is loaded. You can see more details about ready here.
The click is used to assign the click event to the selected element. In our example, it is an input tag. You can read here for more details.
Remember, you can use these events only if you want to check the checkbox. The reason is that it detects the click event rather than checking the checked property.
In the output given above, you can observe that it shows You Checked always. It does not care whether you uncheck or not, but it just detects whether you click or not.
It notices the click event, which is helpful to know if the checkbox is checked only. It would not be a good choice if you also want to know whether the checkbox is unchecked or not.
