Checkbox in JavaScript

By: aathishankaran in JavaScript Tutorials on 2007-03-27

In HTML, checkboxes are represented by the <input> element with the type attribute set to "checkbox". In JavaScript, you can access this element and its properties using the document.getElementById() or document.querySelector() methods.

Here is an example of creating a checkbox using HTML and accessing it in JavaScript:

<!DOCTYPE html>
<html>
<head>
  <title>Checkbox Example</title>
</head>
<body>
  <input type="checkbox" id="myCheckbox">
  <label for="myCheckbox">My Checkbox</label>

  <script>
    // Access the checkbox element
    const checkbox = document.getElementById("myCheckbox");

    // Check if the checkbox is checked
    if (checkbox.checked) {
      console.log("Checkbox is checked!");
    }

    // Add an event listener to the checkbox
    checkbox.addEventListener("change", () => {
      console.log("Checkbox state changed:", checkbox.checked);
    });
  </script>
</body>
</html>

In this example, we create a checkbox with the ID "myCheckbox" and a label. We then access the checkbox element in JavaScript using document.getElementById("myCheckbox") and store it in the checkbox variable.

We check if the checkbox is initially checked using checkbox.checked. We can also add an event listener to the checkbox to detect when it is checked or unchecked using the addEventListener() method. In this case, we listen for the "change" event and log the current state of the checkbox using checkbox.checked.

Previous
<< Variables in JavaScript

Next
Form in JavaScript >>