JavaScript 如何选择所有复选框

为了选择页面上的所有复选框，我们需要创建一个名为selectAll()的函数，通过这个函数我们可以同时选择所有复选框。在本节中，我们不仅会学习如何选择所有复选框，还会创建另一个函数来取消选择所有选中的复选框。

那么，让我们看看如何在JavaScript代码中选中和取消选中所有复选框。

在JavaScript代码中选择所有复选框

我们将实现和理解一个示例，在这个示例中我们将创建两个按钮，一个用于选择所有复选框，另一个用于取消选择所有选中的复选框。示例代码如下：

<html>
<head>
        <title>Selecting or deselecting all CheckBoxes</title>
        <script type="text/javascript">
            function selects(){
                var ele=document.getElementsByName('chk');
                for(var i=0; i<ele.length; i++){
                    if(ele[i].type=='checkbox')
                        ele[i].checked=true;
                }
            }
            function deSelect(){
                var ele=document.getElementsByName('chk');
                for(var i=0; i<ele.length; i++){
                    if(ele[i].type=='checkbox')
                        ele[i].checked=false;

                }
            }           
        </script>
    </head>
<body>
    <h3>Select or Deselect all or some checkboxes as per your mood:</h3>
    <input type="checkbox" name="chk" value="Smile">Smile<br>
    <input type="checkbox" name="chk" value="Cry">Cry<br>
    <input type="checkbox" name="chk" value="Laugh">Laugh<br>
    <input type="checkbox" name="chk" value="Angry">Angry<br>
     <br>
        <input type="button" onclick='selects()' value="Select All"/>
        <input type="button" onclick='deSelect()' value="Deselect All"/>
      </body>
</html>

输出：

当我们点击“全选”按钮时，我们会得到：

JavaScript 如何选择所有复选框

当我们取消选中所有复选框时，我们得到：

JavaScript 如何选择所有复选框

代码解释

上面的完整代码基于HTML和JavaScript。
在html body部分，我们创建了四个input类型的复选框和两个按钮类型的input。对于input类型为按钮的，我们创建了一个按钮用于选择复选框，在onClick()时将调用selects()函数，另一个按钮用于取消选择复选框（如果选择了任何/全部），在onClick()时将调用deselect()函数。
因此，当用户点击“全选”按钮时，它将移动到脚本部分，在其中找到selects()函数并执行其中的语句。
同样，当用户选择复选框后点击“取消全选”按钮时，将调用deselect()函数。另外，如果用户只选择了一个或两个复选框，然后点击“取消全选”按钮，它们也将被取消选择。如果用户未选择任何复选框，然后点击“取消全选”按钮，将不显示或执行任何操作。

用户可以创建许多类似的复选框示例，并尝试该函数。

这样，用户可以选择全部或取消选择全部复选框。