All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

JavaScript Checkbox Checked

Last Updated : Mar 11, 2024

JavaScript Checkbox Checked

In this article we will show you the solution of JavaScript checkbox checked, a checkbox input element's "checked" property in JavaScript allows it to be checked or unchecked programmatically.

A boolean value indicating whether or not the checkbox is checked at the moment is returned by the "checked" attribute.

Simply set a checkbox's "checked" property to true to check it, and set it to false to uncheck it.

Additionally, event listeners can be used to determine when a checkbox's state has changed and to trigger the execution of a function or code block.

These methods make it simple to incorporate functionality and interactivity into your online projects using JavaScript checkboxes. We'll talk about the idea of a ticked JavaScript checkbox now.

Step By Step Guide On JavaScript Checkbox Checked :-

<html>
<head>
   <title>Javascript checkbox checkedtitle>
</head>
<body>
   <h2>Javascript checkbox checked or not using <i> .checked attribute </i></h2>
   <h4>Check the below checkbox to see the text div</h4>
   <input type = "checkbox" id = "checkbox">
   <div id = "text"> </div>
   <script>
      let checkbox = document.getElementById("checkbox");
      checkbox.addEventListener( "change", () => {
         if ( checkbox.checked ) {
            text.innerHTML = " Check box is checked. ";
         } else {
            text.innerHTML = "";
         }
      });
   </script>
</body>
</html>
  1. You can see that we wrote the code with the JavaScript checkbox selected in this section.
  2. This code generates a straightforward web page with a text div element, a checkbox input element, and JavaScript to determine whether the checkbox is checked or not.
  3. The title of the web page is initially defined in the HTML code's <title> tag.
  4. The goal of the page is then explained in a <h2> heading and a <h4> subsection. A <input> element with the type attribute set to "checkbox" and the ID "checkbox" is defined below the subheading.
  5. We'll utilise this checkbox to show you how to see if it's checked or not.
  6. Next, a "text" ID is defined for a "<div>" element.
  7. The message that appears in this element will vary based on whether the checkbox is selected or not.
  8. The document is then used to define a variable called "checkbox" in JavaScript.The checkbox element can be retrieved using the getElementById() function.
  9. The checkbox element is then given a call to the addEventListener() method, which keeps an eye out for a "change" event.
  10. Every time the user checks or unchecks the checkbox, this event is triggered.
  11. The arrow function in the event listener then determines whether the checkbox's "checked" attribute is true or false.
  12. If it is true, the string "Check box is checked" is set in the "text" div element's innerHTML property.
  13. If it is false, the "text" div element's innerHTML property is set to an empty string, thereby hiding any content that would have earlier been displayed.

Conclusion :-

As a result, we have successfully acquired the knowledge of the JavaScript checkbox checked.

We also discovered that web designers may construct dynamic, interactive websites that react immediately to user interaction by combining HTML and JavaScript.

Understanding how to utilize JavaScript to work with checkbox components is a crucial skill that may help you add interactivity & functionality to your projects, whether you're developing a straightforward form or a complicated online application.

I hope this article on JavaScript checkbox checked helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Dikshita

Passionate Electronics and Communication Engineering student with expertise in web development (HTML, CSS, JS,PHP, Bootstrap, React.js) and content writing. Eager problem solver and tech enthusiast, adept at creating engaging web experiences.

Follow Dikshita On Linkedin 🡪