Programming Tutorials

(追記) (追記ここまで)

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>>

(追記) (追記ここまで)