check uncheck vanila js

Check Uncheck Vanilla JS

When it comes to creating checkboxes using JavaScript, there are two options: using vanilla JS or a library like jQuery. Let's focus on the vanilla JS method.

Create the HTML structure

First, create the HTML structure for the checkbox. This can be done using the input tag with type "checkbox" and a label tag.

<div>
  <input type="checkbox" id="myCheckbox">
  <label for="myCheckbox">My Checkbox</label>
</div>

This will create a simple checkbox with a label next to it. The "for" attribute of the label should match the "id" of the checkbox to associate the two elements.

Add the event listener

Next, add an event listener to the checkbox to detect when it is clicked. This can be done using the addEventListener method.

const checkbox = document.getElementById('myCheckbox');

checkbox.addEventListener('click', function() {
  // do something when checkbox is clicked
});

In this example, we are selecting the checkbox element using its ID and adding an event listener for the "click" event. Inside the function, you can add code to perform some action when the checkbox is clicked.

Toggle checked status

One common action to perform when a checkbox is clicked is to toggle its "checked" status. This can be done using the checked property of the checkbox element.

const checkbox = document.getElementById('myCheckbox');

checkbox.addEventListener('click', function() {
  if (checkbox.checked) {
    checkbox.checked = false;
  } else {
    checkbox.checked = true;
  }
});

In this example, we are checking the "checked" property of the checkbox element and toggling it to the opposite value.

Conclusion

Creating and manipulating checkboxes using vanilla JS is straightforward and can be done easily with just a few lines of code. While libraries like jQuery may offer additional convenience and functionality, it's important to understand the basics of vanilla JS before diving into more complex solutions.