How to check the Select all checkbox after checking all its child checkboxes?

Question

How to check the Select all checkbox after checking all its child checkboxes?

5.6k views Asked by PHPLover At 23 August 2013 at 09:34

I want to check all the checkboxes upon checking the "Selectall" checkbox and vice versa if I select all the checkboxes one by one then the "Selectall" checkbox should be automatically get checked. If I uncheck any of it's child checkboxes then the "Select all" checkbox should also be unchecked.

In my code, all the things are working except one thing that if I select all the checkboxes one by one then the "Selectall" checkbox should be automatically get checked. Can anyone help me in making this thing workable for me. For your reference I'm giving my file code (HTML and Javascript code) here, so that you could test on your local machine.:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
    $("#ckbCheckAll").click(function () {
        $(".checkBoxClass").prop('checked', $(this).prop('checked'));
    });

    $(".checkBoxClass").change(function(){
        if (!$(this).prop("checked")){
            $("#ckbCheckAll").prop("checked",false);
        }
    });
});
</script>
</head>
<body>
<input type="checkbox" id="ckbCheckAll" /> Check All
    <p id="checkBoxes">
        <input type="checkbox" class="checkBoxClass" id="Checkbox1" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox2" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox3" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox4" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox5" />
        <br />
    </p>
</body>
</html>

Original Q&A

There are 4 answers

Wolfgang Fahl On 21 June 2015 at 05:50

In addition to the selectAll checkbox I have experimented with adding selectRow and selectCol checkboxes to get the same effect for each row and column of the grid of checkboxes.

see enter image description here http://jsfiddle.net/wf_bitplan_com/snpc2L34/29/

/**
 * http://stackoverflow.com/questions/432493/how-do-you-access-the-matched-groups-in-a-javascript-regular- 
 * expression
 *  examples:
 *
 *  var matches = getRegexMatches(/(dog)/, "dog boat, cat car dog");
 *  console.log(matches);
 *
 *  var matches = getRegexMatches(/(dog|cat) (boat|car)/, "dog boat, cat car");
 *  console.log(matches);
 */
function getRegexMatches(regex, string) {
    if(!(regex instanceof RegExp)) {
        return "ERROR";
    }
    else {
        if (!regex.global) {
            // If global flag not set, create new one.
            var flags = "g";
            if (regex.ignoreCase) flags += "i";
            if (regex.multiline) flags += "m";
            if (regex.sticky) flags += "y";
            regex = RegExp(regex.source, flags);
        }
    }
    var matches = [];
    var match = regex.exec(string);
    while (match) {
        if (match.length > 2) {
            var group_matches = [];
            for (var i = 1; i < match.length; i++) {
                group_matches.push(match[i]);
            }
            matches.push(group_matches);
        }
        else {
            matches.push(match[1]);
        }
        match = regex.exec(string);
    }
    return matches;
}

/**
 * get the select_row or select_col checkboxes dependening on the selectType row/col
 */
function getSelectCheckboxes(selectType) {
  var regex=new RegExp("select_"+selectType+"_");
  var result= $('input').filter(function() {return this.id.match(regex);});
  return result;
}

/**
 * matrix selection logic 
 * the goal is to provide select all / select row x / select col x
 * checkboxes that will allow to 
 *   select all: select all grid elements 
 *   select row: select the grid elements in the given row
 *   select col: select the grid elements in the given col
 *
 *   There is a naming convention for the ids and css style classes of the the selectors and elements:
 *   select all -> id: selectall
 *   select row -> id: select_row_row e.g. select_row_2
 *   select col -> id: select_col_col e.g. select_col_3 
 *   grid element -> class checkBoxClass col_col row_row e.g. checkBoxClass row_2 col_3
 */
$(document).ready(function () {
    // handle click event for Select all check box
    $("#selectall").click(function () {
       // set the checked property of all grid elements to be the same as
       // the state of the SelectAll check box
       var state=$("#selectall").prop('checked');
       $(".checkBoxClass").prop('checked', state);
       getSelectCheckboxes('row').prop('checked', state);
       getSelectCheckboxes('col').prop('checked', state);
    });

    // handle clicks within the grid
    $(".checkBoxClass").on( "click", function() {
      // get the list of grid checkbox elements
      // all checkboxes
      var all = $('.checkBoxClass');
      // all select row check boxes
      var rows = getSelectCheckboxes('row');
      // all select columnn check boxes
      var cols = getSelectCheckboxes('col');
      // console.log("rows: "+rows.length+", cols:"+cols.length+" total: "+all.length);
      // get the total number of checkboxes in the grid
      var allLen=all.length;
      // get the number of checkboxes in the checked state
      var filterLen=all.filter(':checked').length;
      // console.log(allLen+"-"+filterLen);
      // if all checkboxes are in the checked state  
      // set the state of the selectAll checkbox to checked to be able
      // to deselect all at once, otherwise set it to unchecked to be able to select all at once
      if (allLen == filterLen) {
        $("#selectall").prop("checked", true);
      } else {
        $("#selectall").prop("checked", false);
      }

      // now check the completeness of the rows
      for (row = 0; row < rows.length; row++) {
        var rowall=$('.row_'+row);
        var rowchecked=rowall.filter(':checked');
        if (rowall.length == rowchecked.length) {
          $("#select_row_"+row).prop("checked", true);
        } else {  
          $("#select_row_"+row).prop("checked", false);
        }
     }
    });

    $('input')
      .filter(function() {
        return this.id.match(/select_row_|select_col_/);
    }).on( "click", function() {
      var matchRowColArr=getRegexMatches(/select_(row|col)_([0-9]+)/,this.id);
      var matchRowCol=matchRowColArr[0];
      // console.log(matchRowCol);
      if (matchRowCol.length==2) {
        var selectType=matchRowCol[0];  // e.g. row
        var selectIndex=matchRowCol[1]; // e.g. 2
        // console.log(this.id+" clicked to select "+selectType+" "+selectIndex);
        // e.g. .row_2
        $("."+selectType+"_"+selectIndex)
         .prop('checked', $("#select_"+selectType+"_"+selectIndex).prop('checked'));
     }
    });
  });

marcel On 23 August 2013 at 09:38

Use jQuery( ":checkbox" )

Maybe you can look @ selectors of jquery http://api.jquery.com/category/selectors/

Nejma Latheef On 21 October 2019 at 05:01

//----------Select AllCheckBoxes Begin ------------------------
function toggleChkBox() {
  $('#tblPermissionDetails td input:checkbox').prop('checked', $('#chkSelectAll')[0].checked);
}
//----------Select AllCheckBoxes End --------------------------

//----------Check/Uncheck SelectAll checkbox based on other checkboxes Begin----------------
$('#tblPermissionDetails td input:checkbox').change(function() {
  if (!$(this).prop("checked")) {
    $("#chkSelectAll").prop("checked", false);
  } else {
    var PermissionList = [];
    var PermissionListChecked = [];
    $('#tblPermissionDetails td input:checkbox').each(function() {
      PermissionList.push(this.name);
    })
    $('#tblPermissionDetails td input:checkbox:checked').each(function() {
      PermissionListChecked.push(this.name);
    })
    if (PermissionList.length == PermissionListChecked.length) {
      $("#chkSelectAll").prop("checked", true);
    }
  }
});
//----------Check/Uncheck SelectAll checkbox based on other checkboxes End------------------

<table class="table table-striped" id="tblPermissionDetails">
  <thead>
    <tr>
      <th>Sl.No</th>
      <th>Permission</th>
      <th>Description</th>
      <th><input type="checkbox" id="chkSelectAll" onclick="toggleChkBox();" />(Select All)</th>
    </tr>
  </thead>
  <tbody>
    @{ int i = 1; List
    <FDSApp.Models.RolePermissionDetailsModel> permissionModel = Model; foreach (var item in permissionModel) {
      <tr>
        <td>@i</td>
        <td>@item.PermissionName</td>
        <td>@item.Description</td>
        <td>@Html.CheckBox(@item.PermissionId.ToString(), @item.IsEnabled == 0 ? false : true)</td>
      </tr>
      i = i + 1; } }
  </tbody>
</table>

**jcubic** · Accepted Answer · 2013-08-23 09:38:09

You can check how many checkboxes are there and how many are checked:

$(".checkBoxClass").change(function(){
    var all = $('.checkBoxClass');
    if (all.length === all.filter(':checked').length) {
        $("#ckbCheckAll").prop("checked", true);
    } else {
        $("#ckbCheckAll").prop("checked", false);
    }
});

Not sure if all can be just $(this);

TechQA.

How to check the Select all checkbox after checking all its child checkboxes?

There are 4 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in CHECKBOX

Related Questions in SELECTALL

Popular Questions

Popular Tags

Trending Questions