Select All CheckBoxes On Click Of One CheckBox Using JQuery

admin_img Posted By Bajarangi soft , Posted On 16-10-2020

In Jquery we can select all checkboxes at a time on click of one checkbox .So today we see how to select all checkboxes on click of one checkbox using jquery

Select All CheckBoxes On Click Of One CheckBox Using JQuery

Step 1:Create index.html file and implement below code.
 

<input type="checkbox" name="sample" class="selectall"/> Select all</label>
<div id="checkboxlist">
    <label><input type="checkbox" name="sample"/>checkbox1</label><br/>
    <label><input type="checkbox" name="sample"/>checkbox2</label><br />
    <label><input type="checkbox" name="sample"/>checkbox3</label><br />
    <label><input type="checkbox" name="sample"/>checkbox4</label><br />
</div>


Step 2:Implement jQuery to select all check box on click of on check box.
 

<script>
    $('.selectall').on('change', function(e) {
        var $inputs = $('#checkboxlist input[type=checkbox]');
        if(e.originalEvent === undefined) {
            var allChecked = true;
            $inputs.each(function(){
                allChecked = allChecked && this.checked;
            });
            this.checked = allChecked;
        } else {
            $inputs.prop('checked', this.checked);
        }
    });

    $('#checkboxlist input[type=checkbox]').on('change', function(){
        $('.selectall').trigger('change');
    });
</script>


Complete Code For Selecting CheckBoxes On Click Of Button Using JQuery

<!DOCTYPE html>
<html>
<head>
    <title>Select All CheckBoxes On Click Of One CheckBox Using JQuery</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<style>
    body {
        background: black;
    }
</style>

<body>
<div class="container">
    <br><br><br>
    <div class="text-center">
        <h1 id="color" style="color: White;">Select All CheckBoxes On Click Of One CheckBox Using JQuery</h1>
    </div>
    <br>
    <div class="col-md-2"></div>
    <div class="col-md-8">

       <div class="well">
           <input type="checkbox" name="sample" class="selectall"/> Select all</label>
           <div id="checkboxlist">
               <label><input type="checkbox" name="sample"/>checkbox1</label><br/>
               <label><input type="checkbox" name="sample"/>checkbox2</label><br />
               <label><input type="checkbox" name="sample"/>checkbox3</label><br />
               <label><input type="checkbox" name="sample"/>checkbox4</label><br />
           </div>
       </div>
    </div>
    <div class="col-md-2"></div>
</body>
</html>

<script>
    $('.selectall').on('change', function(e) {
        var $inputs = $('#checkboxlist input[type=checkbox]');
        if(e.originalEvent === undefined) {
            var allChecked = true;
            $inputs.each(function(){
                allChecked = allChecked && this.checked;
            });
            this.checked = allChecked;
        } else {
            $inputs.prop('checked', this.checked);
        }
    });

    $('#checkboxlist input[type=checkbox]').on('change', function(){
        $('.selectall').trigger('change');
    });
</script>


 

Related Post