Home >Web Front-end >JS Tutorial >How to Check and Respond to Checkbox State Changes Using jQuery?

How to Check and Respond to Checkbox State Changes Using jQuery?

Linda Hamilton
Linda HamiltonOriginal
2024-12-27 02:02:08712browse

How to Check and Respond to Checkbox State Changes Using jQuery?

How to Check Checkbox State Using jQuery

To check the checked property of a checkbox in jQuery and perform an action accordingly, the following steps can be followed:

Customizing HTML:

  • Include the jQuery script in your HTML:
  • Create a checkbox with an ID:
  • Create an element to show or hide based on the checkbox state, with an ID:

jQuery Event Handling:

  • Using JavaScript DOM:

    • Get the checkbox DOM element by ID: document.getElementById('isAgeSelected')
    • Check the checked property and perform corresponding actions:

      if (document.getElementById('isAgeSelected').checked) {
        $("#txtAge").show();
      } else {
        $("#txtAge").hide();
      }
  • Using jQuery:

    • Select the checkbox by ID: $('#isAgeSelected')
    • Use the click event to toggle the visibility of the txtAge element based on the checkbox state:

      $('#isAgeSelected').click(function() {
        $("#txtAge").toggle(this.checked);
      });

The above is the detailed content of How to Check and Respond to Checkbox State Changes Using jQuery?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn