Check All Checkbox on SubCheckbox

Question

I have WebGrid on MVC project with two WebGrid column. The first column collapses the sub-data and the other column is for checkbox.

This checkbox will check all checkbox on its subdata. The problem is I cannot select all the data on its sub-checkbox. This is my sample code:

//This colum will generate checkbox for the main data
   wbclCol.Add(new WebGridColumn
{
    ColumnName = "",
    Header = "",
    CanSort = false,
    Format = (objChildItem) =>
    {
        StringBuilder strbHtml = new StringBuilder();
        strbHtml.Append("<input class='obj-parmain'  name='lngID' value='" + objChildItem.lngPARID + "' data-pardata='" + objChildItem.lngID+ "' data-show='True' type='checkbox' ></input>");

        return new MvcHtmlString(strbHtml.ToString());
    }
});

//This column will generate another column for the sub-data:
 wbclCol.Add(new WebGridColumn
{
    ColumnName = "",
    Header = "",
    CanSort = false,
    Format = (objChildItem) =>
    {
        StringBuilder strbHtml = new StringBuilder();
        strbHtml.Append("<input class='obj-parsub'  name='lngID' value='" + objChildItem.lngPARID + "' data-pardata='" + objChildItem.lngID+ "' data-show='True' type='checkbox' ></input>");

        return new MvcHtmlString(strbHtml.ToString());
    }
});

This is my javascript to select all checkbox on class: obj-parsub when my checkbox with class: obj-parmain is check

 function fncParMainCheck() {
        $(document).off('click', '.obj-parmain');
        $(document).on('click', '.obj-parmain', function (e) {
            var blIsCheck = $(this).is(':checked');
            if (blIsCheck) {
                //var objNext = $('.obj-parsub').nextAll();
                //var objNextMain = $(this).siblings().nextAll().find('.obj-parsub');
                //var objNextMain = $(this).closest('.obj-parmain').find('.obj-parsub').prop('checked', this.checked);
                $(this).closest('.obj-parmain').find('.obj-parsub').parent().parent().nextAll().prop('checked', this.checked);
                //$(objNextMain).prop('checked', blIsCheck);
            }
        });
    }

Answer 1

try with this code. first you check your checkbox is checked or not.

$(document).on('change', '.obj-parmain', function (e) {
if ($(this).is(':checked')){
 $('input:checkbox.obj-parsub').prop('checked', $(this).prop('checked'));
}
else{
    // uncheck logic
  }
});

Answer 2

Try like this

$(document).on('change', '.obj-parmain', function (e) {
$('.obj-parsub input[type="checkbox"]').prop('checked', $(this).prop('checked'));
});

Answer 3

If you encounter the same problem, this works pretty well:

 function fncParMainCheck() {
        $(document).off('click', '.obj-parmain');
        $(document).on('click', '.obj-parmain', function () {
            var blIsCheck = $(this).is(':checked');
            if (blIsCheck) {
                //This will look for the sublist of checkbox that is under class name obj-parsub and checks everything
                var objNext = $(this).parent().parent().find('.obj-parsub');
                $(objNext).prop('checked', blIsCheck);
            }
        });
    }