如何用jQuery取消除一个复选框外的所有其他复选框

如何用jQuery取消除一个复选框外的所有其他复选框

在这篇文章中,我们将看到如何使用jQuery取消所有复选框,除了第一个。

方法 。首先,我们需要得到一个页面中的所有复选框元素。我们可以使用下面的jQuery调用来获得所有的复选框。

$('input[type=checkbox]')

接下来我们可以使用jQuery each函数来迭代每个复选框。

each(function (index, checkbox){
     if (index != 0) {
     checkbox.checked = false;
    }
 });

在上面的片段中,我们传递一个函数给each方法。该函数使用两个参数,即索引和当前元素参考。在这个函数中,我们检查每个复选框的索引。如果索引为0,我们什么都不做。如果索引不为0,我们就取消对当前复选框元素的检查。

例子:下面的代码说明了上述方法的使用。

<!DOCTYPE html>
<html>
  
<head>
    <script type="text/javascript" src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
  
    <script type="text/javascript">
        (document).ready(function () {
            ('#btnUncheckAll').click(function () {
                $('input[type=checkbox]').each(
                  function (index, checkbox) {
                    if (index != 0) {
                        checkbox.checked = false;
                    }
                });
            });
        });
    </script>
</head>
  
<body style="text-align:center">
    <label for="cb1">CheckBox 1</label>
    <input type="checkbox" value="cb1"/>
    <br/>
  
    <label for="cb2">CheckBox 2</label>
    <input type="checkbox" value="cb2"/>
    <br/>
  
    <label for="cb3">CheckBox 3</label>
    <input type="checkbox" value="cb3"/>
    <br/>
  
    <label for="cb4">CheckBox 4</label>
    <input type="checkbox" value="cb4"/>
    <br/>
  
    <label for="cb5">CheckBox 5</label>
    <input type="checkbox" value="cb5"/>
    <br/>
  
    <br/>
    <input type="button" 
           value="Uncheck all checkboxes but first" 
           id="btnUncheckAll"/>
</body>
  
</html>

输出:我们看到以下网页。

如何用jQuery取消除一个复选框外的所有其他复选框?

现在检查所有的复选框。

点击按钮后:所有的复选框都被取消,除了第一个复选框。

如何用jQuery取消除一个复选框外的所有其他复选框?

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

jQuery 方法