How to implement the select all/unselect all function in JavaScript?-JS Tutorial-php.cn

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

WBOY

Release： 2023-10-16 09:28:42

Original

1216 people have browsed it

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>

Copy after login

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; // 将每个选项的复选框状态设为与全选/全不选的复选框状态一致
  }
});

Copy after login

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

or <body> of the HTML page with the following code: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><script src="main.js"></script></pre><div class="contentsignin">Copy after login</div></div>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. <code>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!