How to Create a "Select All" Checkbox in HTML?

How to Select All Checkboxes with a Single "Select All" Checkbox in HTML

Creating an "select all" checkbox in an HTML page allows for the convenient selection of multiple checkboxes with a single click. By implementing this functionality, you can enhance user experience and streamline form submission.

To implement a "select all" checkbox, you can use JavaScript to manipulate the checked property of all other checkboxes:

<script type="text/javascript">
  function toggleAll(source) {
    var checkboxes = document.querySelectorAll('input[type="checkbox"][name="foo"]');
    for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].checked = source.checked;
    }
  }
</script>

In this script, the toggleAll() function is defined to toggle the checked state of all checkboxes with the name "foo" whenever the source checkbox (the "select all" checkbox) is clicked.

To use this script, simply add the following checkbox to your HTML:

<input type="checkbox" onclick="toggleAll(this)" /> Select All

Once integrated, clicking the "Select All" checkbox will now toggle the checked state of all other checkboxes on the page with the name "foo." This provides a convenient way for users to quickly and easily select all items in a form.

The above is the detailed content of How to Create a "Select All" Checkbox in HTML?. For more information, please follow other related articles on the PHP Chinese website!