zwl1619 zwl1619 - 7 months ago 25
Javascript Question

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

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

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>

Answer

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

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

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