Home > Article > Web Front-end > How to implement the select all/unselect all function in JavaScript?

How to implement the select all/unselect all function in JavaScript?

WBOYOriginal: 2023-10-16 09:28:421219browse

JavaScript 如何实现全选/全不选功能？

JavaScript How to implement the select all/unselect all function?

When developing web pages, we often encounter the need to select or unselect multiple check boxes. This requirement is very common in scenarios such as data lists and forms. The select all/unselect all function can be easily implemented using JavaScript. Specific code examples are described below.

First, we need an HTML page to demonstrate this feature. The following is a basic HTML structure:

<!DOCTYPE html>
<html>
<head>
  <title>全选/全不选</title>
  <script src="main.js"></script>
</head>
<body>
  <h2>全选/全不选示例</h2>
  <input type="checkbox" id="selectAll"> 全选/全不选
  <br><br>
  <input type="checkbox" class="checkbox"> 选项 1
  <input type="checkbox" class="checkbox"> 选项 2
  <input type="checkbox" class="checkbox"> 选项 3
  <input type="checkbox" class="checkbox"> 选项 4
  <input type="checkbox" class="checkbox"> 选项 5
</body>
</html>

Next, we need to write the relevant code in the JavaScript file. We can write the following code in the main.js file:

// 获取全选/全不选的复选框元素和所有选项的复选框元素
var selectAllCheckbox = document.getElementById('selectAll');
var checkboxes = document.getElementsByClassName('checkbox');

// 绑定全选/全不选的复选框的点击事件
selectAllCheckbox.addEventListener('click', function() {
  // 遍历所有选项的复选框
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = selectAllCheckbox.checked; // 将每个选项的复选框状态设为与全选/全不选的复选框状态一致
  }
});

In the above code, we first obtain the full A checkbox element for selecting/unselecting all options and a checkbox element for all options. Then, we bound the click event of the all-selected/unselected checkbox through addEventListener. In the click event handler, we use a checkbox that loops through all options and sets its state to be consistent with the selected/unselected checkbox state. Finally, we need to connect the main.js file to the HTML page. This can be placed in the

93f0f5c25f18dab9d176bd4f6de5d30e

or 6c04bd5ca3fcae76e30b72ad730ca86d of the HTML page with the following code: <pre class='brush:html;toolbar:false;'><script src="main.js"></script></pre>Now, we can open it in the browser HTML page and try the select all/unselect all functionality. When we click the Select All/Deselect All checkbox, the checkboxes of all options will change state accordingly. Through the above code example, we can see how JavaScript can easily implement the select all/unselect all function. This is very useful for developing batch selection operations in web pages, improving the convenience and efficiency of user interaction. I hope this article can help readers better understand and use the select all/unselect all function in JavaScript.

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

JavaScript html 循环 JS 事件

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：How to implement the automatic carousel function of web pages in JavaScript?Next article：How to implement the automatic carousel function of web pages in JavaScript?

See more

How to implement the select all/unselect all function in JavaScript?

Related articles