How to Display Text When Checkbox is Checked

As a web developer, you may have faced a requirement to show or hide certain elements of a web page based on the status of a checkbox.

For example, you might want to display an error message if a checkbox is not checked or show additional information when it’s checked.

In this tutorial, we will discuss how to display text when a checkbox is checked using JavaScript and jQuery.

Prerequisites

Before we dive into the implementation, you should have a basic understanding of HTML, CSS, and JavaScript. Familiarity with jQuery will also be helpful but is not required.

Step 1: HTML Markup

The first step is to create the HTML markup for the checkbox and the text that we want to display when the checkbox is checked. Here’s an example of how you can create the HTML structure:

<input type="checkbox" id="checkbox">
<label for="checkbox">Show additional information</label>
<p id="text">This is the text that will be displayed when the checkbox is checked</p>

In this example, we have created a checkbox with the ID “checkbox”.

We have also created a label for the checkbox with the “for” attribute set to “checkbox”, which will associate the label with the checkbox.

The text that we want to display when the checkbox is checked is contained within a paragraph tag with the ID “text”.

Step 2: CSS Styling

The next step is to style the text so that it is hidden when the checkbox is not checked.

To do this, we can add the following CSS to our stylesheet:

#text {
  display: none;
}

This will hide the text when the page loads.

Step 3: JavaScript/jQuery Implementation

Now that we have the HTML and CSS in place, we can add the JavaScript or jQuery code to show and hide the text based on the checkbox status.

Here’s an example using JavaScript:

const checkbox = document.querySelector("#checkbox");
const text = document.querySelector("#text");

checkbox.addEventListener("change", function() {
if (checkbox.checked) {
text.style.display = "block";
} else {
text.style.display = "none";
}
});

And here’s an example using jQuery:

$("#checkbox").change(function() {
if ($(this).is(":checked")) {
$("#text").show();
} else {
$("#text").hide();
}
});

In both examples, we have selected the checkbox and text elements using their IDs.

We have then added an event listener to the checkbox to listen for a change event.

Whenever the checkbox status changes, we check if it is checked or not, and show or hide the text accordingly.

Conclusion

Displaying text when a checkbox is checked is a simple task that can be accomplished using JavaScript or jQuery.

By following the steps outlined in this article, you can add this functionality to your web pages with ease.