通过jQuery单击一个复选框时如何选择所有复选框并取消选择？答案

【问题标题】：How to select all the checkboxes and cancel selecting when clicking one checkbox via jQuery?通过jQuery单击一个复选框时如何选择所有复选框并取消选择？
【发布时间】：2016-04-29 16:10:33
【问题描述】：

如何通过jQuery单击一个复选框时选择所有复选框并取消选择？

html如下。
当我单击名为 Select all 的复选框时，
它下面的所有复选框都将被选中，
再次点击它，它下面的所有复选框都将被取消。

怎么做，有demo吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'>
    <link href="https://cdn.bootcss.com/tether/1.2.0/css/tether.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/tether/1.2.0/css/tether-theme-basic.min.css" rel="stylesheet">
</head>
<body>

<div class="container">
    <table class="table">
        <thead>
        <tr>
            <th>
                <label class="c-input c-checkbox">
                    <input type="checkbox">
                    <span class="c-indicator"></span>Select all
                </label>
            </th>
            <th>Name</th>
            <th>Age</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                <label class="c-input c-checkbox">
                <input type="checkbox">
                <span class="c-indicator"></span>
            </label>
            </td>
            <td>Jim</td>
            <td>19</td>
        </tr>
        <tr>
            <td>
                <label class="c-input c-checkbox">
                    <input type="checkbox">
                    <span class="c-indicator"></span>
                </label>
            </td>
            <td>Lucy</td>
            <td>18</td>
        </tr>
        <tr>
            <td>
                <label class="c-input c-checkbox">
                    <input type="checkbox">
                    <span class="c-indicator"></span>
                </label>
            </td>
            <td>Lily</td>
            <td>18</td>
        </tr>
        </tbody>
    </table>
</div>

<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.2.0/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
</body>
</html>

【问题讨论】：

你需要自己尝试一些东西。 SO 不是代码编写服务。尝试一下，然后如果出现问题或者您需要帮助，请回来告诉我们您要去哪里。
已经在这里回答了：stackoverflow.com/questions/9669005/…

标签： javascript jquery

【解决方案1】：

为您的全选复选框提供一个 ID：

<input type="checkbox" id="selectall">

给所有你想被选中的复选框一个类：

<input type="checkbox" class="checkboxSelection">

jQuery:

$("#selectall").change(function() {
    if($(this).is(":checked")) {
        $(".checkboxSelection").each(function() {
            $(this).prop('checked', true);
        });
    }
    else {
        $(".checkboxSelection").each(function() {
            $(this).prop('checked', false);
        });
    }       
});

此外，如果未选中另一个复选框，则您可能希望取消选中“全选”复选框，并在选中所有复选框时选中：

$(".checkboxSelection").change(function() {
    var allSelected = true;

    $(".checkboxSelection").each(function() {
        if(!$(this).is(":checked")) {
            $("#selectall").prop('checked', false);
            allSelected = false;
        }
    });

    if(allSelected)
        $("#selectall").prop('checked', true);
});

【讨论】：

谢谢！还有一件事，如果我手动选中它下面的所有复选框，我希望选中 Select All 复选框。
sorry,all the checkbox应该是all the checkboxes。在编辑版本中，Select All复选框在勾选时会被选中
再次感谢！我明白了。

【解决方案2】：

我做了一个演示，但是你需要看并尝试理解，而不仅仅是使用它，这是非常基本的逻辑，尝试使用语法，它会很容易。

https://jsfiddle.net/vbrcfrn6/

$('#selectAll').on('change', function(){
    var state = $(this).prop('checked');
    $('.table input[type="checkbox"]').each(function(){
        $(this).prop('checked', state);
    });
});

我在 Select all 的输入中添加了一个 id="selectAll"

*在选择器中添加 '.table' 以限制仅在此表的复选框中执行操作

【讨论】：

这将使页面上的所有复选框都被选中。 OP 应该考虑到这一点。
是的，为了限制，我们可以插入表类，在每个输入中插入一个类来接收这个

【解决方案3】：

 $('input[type="checkbox"]').first().on('change', function(){
    $('input[type="checkbox"]').each(function(){
    $(this).prop('checked', $('input[type="checkbox"]').first().is(':checked'));
  });
});

这里只是一个快速的 sn-p，见 fiddle：https://jsfiddle.net/k2oeh80w/

【讨论】：