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

Question

The html is as follow.
When I click the checkbox named Select all,
all the checkboxes below it will be selected,
and click it again,all the checkboxes below it will be cancelled.

How to do it,is there a 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>

You need to try something yourself. SO isn't a code-writing service. Have a stab at something, then if something goes wrong or you need help come back and show us where you got to. — Mitya, Apr 29 '16 at 16:13
Already been answered here:http://stackoverflow.com/questions/9669005/jquery-toggle-select-all-checkboxes — MikeBird, Apr 29 '16 at 16:14

Armand Maree · Accepted Answer · 2016-05-01T20:05:22.487

Give your Select All check box an ID:

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

Give all the checkboxes you want to be selected a class:

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

Also you'd probably want the Select All check box to be unchecked if one of the other is unchecked and checked if all is checked:

$(".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);
});

Thanks! one more thing,I want the `Select All` checkbox to be checked if I manually select all the checkbox below it. — zwl1619, Apr 29 '16 at 16:36
sorry,`all the checkbox` shoule be `all the checkboxes`.In the edited version, the `Select All` checkbox will be selected when checking one — zwl1619, Apr 29 '16 at 16:47

evandrobm · Answer 2 · 2016-04-29T16:30:09.373

2

I did a demo, but you need to look at and try to understand, not just use it, it's very basci logic, try to get used with the syntax and it will be easy.

https://jsfiddle.net/vbrcfrn6/

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

I put an id="selectAll" in the input for Select all

*add '.table' in selector to make limit the action only in this table's checkboxes

edited Apr 29 '16 at 16:30

answered Apr 29 '16 at 16:23

evandrobm

445
1
7
17

This will make all the check boxes on the page become checked. The OP should just take this into account. – Armand Maree Apr 29 '16 at 16:25
Yes, to limit, we can inser the table class, os a class in each input that will receive this – evandrobm Apr 29 '16 at 16:29

score 0 · Answer 3 · answered Apr 29 '16 at 16:25

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

Just a quick snippet here, see fiddle : https://jsfiddle.net/k2oeh80w/

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

3 Answers3