Question

我在MVC项目上有两个WebGrid列的WebGrid。第一列折叠子数据，另一列用于复选框。

此复选框将检查其子数据上的所有复选框。问题是我无法选择其子复选框上的所有数据。这是我的示例代码：

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

这是我的javascript选择类上的所有复选框：obj-parsub当我的复选框与类：obj-parmain检查时

 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

尝试使用此代码。首先检查您的复选框是否已选中。

$(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

试试这个

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

Answer 3

如果您遇到同样的问题，这很有效：

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

检查SubCheckbox上的所有复选框

3 个答案: