Question

如何选择所有复选框并在通过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>

Answer 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);
});

Answer 2

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

https://jsfiddle.net/vbrcfrn6/

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

我在选择全部

的输入中放了一个id =“selectAll”

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

Answer 3

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

这里只是一个快速的片段，请参阅小提琴：https://jsfiddle.net/k2oeh80w/

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

3 个答案: