Home > Article > Web Front-end > How to implement select all in JavaScript

How to implement select all in JavaScript

王林Original: 2023-05-12 15:44:372229browse

Preface

The select all function in the Web page is a very common and practical function, which can easily select multiple items for batch operations. In this article, we will learn how to use JavaScript to implement the select all function.

Principle of implementing select all

Before learning how to implement the select all function, we must understand how to obtain the status of a selection box (checkbox) in web development.

The status of the selection box can be obtained through the checked attribute. When the checked attribute is true, it means that the selection box is selected. When the checked attribute is false, it means that the selection box is not selected.

In JavaScript, we can get the reference to the specified selection box through the getElementById() method, and use the checked attribute to set or get its status.

The implementation principle of the select all function is to find all the selection boxes and set their checked attribute to true.

Specific implementation steps

Let’s implement the select all function step by step.

Step 1: Write HTML code

First, create a select all selection box and a group of sub-selection boxes in the HTML code.

<!DOCTYPE html>
<html>
<head>
  <title>全选功能实现</title>
</head>
<body>
  全选：
  <input type="checkbox" id="check_all">

  <br>

  子选择框：
  <input type="checkbox" name="item" class="item">
  <input type="checkbox" name="item" class="item">
  <input type="checkbox" name="item" class="item">
  <input type="checkbox" name="item" class="item">
  <input type="checkbox" name="item" class="item">
</body>
</html>

In the above code, we create a select-all selection box and a group of sub-selection boxes. The name attribute of the sub-selection box is set to "item", and the class attribute is set to "item". Here we use the class selector to select all sub-selection boxes.

Step 2: Write JavaScript code

Add JavaScript code in the HTML code to implement the select all function.

<script>
  // 获取全选选择框和子选择框
  var checkAll = document.getElementById("check_all");
  var items = document.getElementsByClassName("item");

  // 给全选选择框绑定点击事件
  checkAll.onclick = function() {
    for (var i = 0; i < items.length; i++) {
      items[i].checked = this.checked;
    }
  };

  // 给每个子选择框绑定点击事件
  for (var i = 0; i < items.length; i++) {
    items[i].onclick = function() {
      var checkedCount = 0;
      for (var j = 0; j < items.length; j++) {
        if (items[j].checked) {
          checkedCount++;
        }
      }

      checkAll.checked = (checkedCount == items.length);
    };
  }

</script>

In the above code, we first use the getElementById() method to get all the selected selection boxes and the getElementsByClassName() method to get all the sub-selection boxes.

Then bind the click event to the select all selection box. In the callback function, use a loop to traverse all the sub-selection boxes and set their checked attribute to the checked attribute of the select all selection box.

Then bind a click event to each sub-selection box. In the callback function, calculate the number of selected sub-selection boxes and set the check result to the checked attribute of the all-select selection box.

Summary

In this article, we learned how to use JavaScript to implement the select all function. Although the select all function seems easy, it still requires attention to some details to implement. I hope this article can be helpful to everyone learning web development and JavaScript programming.

The above is the detailed content of How to implement select all in JavaScript. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html checkbox 回调函数循环 class 事件选择器

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

Previous article：What software should I use for javascript?Next article：What software should I use for javascript?

See more

How to implement select all in JavaScript

Related articles