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

How to select all the checkboxes and cancel selecting when clicking one checkbox via jQuery?

本文关键字：复选框 一个 选择 取消 单击 jQuery 何通过      更新时间：2023-09-26

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

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

怎么做，有演示吗？

<!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>

给全选复选框一个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);
});

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

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"，使操作仅限于此表的复选框

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

这里只是一个简短的片段，请参阅fiddle：https://jsfiddle.net/k2oeh80w/

相关文章：