复选框事件未使用 jquery 触发

Question

我在父网格中有复选框行，在子网格中有复选框行，Hierarchy grid mode using kendo UI 也有。架构是这样的……

我在父网格中有四行，其中一列是复选框，对于每个父行，我都有一个包含 4 行的子网格和一个复选框列...

如果我单击父网格行中的复选框，我只需要访问与该行相关的子网格列中的复选框，并且需要将该子网格的选中属性设置为 true.....

为此，我正在访问这样的父网格复选框..

这是javascript函数

  <script type="text/javascript">
    $('.chkbxq').live('click', function (e) {
        alert('1'); // this alert is not firing 
        var checkchildgrid = $('#Gridparent').find(".k-detail-row").find('td.k-detail-cell').find('[type="checkbox‌​"]').is(':checked');
        alert(checkchildgrid);
        if ($(this).is(':checked')) {    
            checkchildgrid.attr('checked', 'checked');
        } else {
            checkchildgrid.attr('checked', false);
        }    
    });        
</script>

这是层次网格代码....

    @model IEnumerable<Topco.TopMapp.MVC.Models.CostPageSearch>
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
@using (Html.BeginForm())
{ 
   @(Html.Kendo().Grid<Topco.TopMapp.MVC.Models.CostPageSearch>()
        .Name("Gridparent")
        .Columns(columns =>
        {
            columns.Template(@<text></text>).ClientTemplate("<input id='chqprnt' class= 'chkbxq' type='checkbox'/>").Width(30);
            columns.Bound(e => e.CostPage).Width(100);
            columns.Bound(e => e.Description).Width(100);
            columns.Bound(e => e.VendorName).Width(100);
            columns.Bound(e => e.BillTypeDirect).Width(100);
            columns.Bound(e => e.BillTypeWarehouse).Width(100);
            columns.Bound(e => e.VendorName).Width(100);

        })
        .Sortable()
        .Pageable()
        .Scrollable()
        .ClientDetailTemplateId("client-template")
        .HtmlAttributes(new { style = "height:480px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(6)
            .Read(read => read.Action("HierarchyBinding_Employees", "CostPageDisplay"))
        )
        .Events(events => events.DataBound("dataBound"))
)
    <script id="client-template" type="text/kendo-tmpl">
         @(Html.Kendo().Grid<Topco.TopMapp.MVC.Models.ItemsDescriptionModel>()
            .Name("grid_#=CostPage#")
            .Columns(columns =>
            {
                columns.Template(@<text></text>).ClientTemplate("<input id='checkbox'  class='chkbx' type='checkbox' />").Width(30);
                columns.Bound(o => o.ItemId).Width(100);
                columns.Bound(o => o.ItemDescription).Width(100);
                columns.Bound(o => o.BrandCode).Width(100);
                columns.Bound(o => o.PackSize).Width(100);
            })
           .DataSource(dataSource => dataSource
               .Ajax()
               .PageSize(5)
               .Read(read => read.Action("HierarchyBinding_Orders", "CostPageDisplay" , new { employeeID = "#=CostPage#" }))
           )
           .Pageable()
           .Sortable()
           .ToClientTemplate()
   )
    </script>
<script>
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
        //alert('1');
    }
</script>

但是当我点击父网格中的复选框时，点击事件没有触发......

有没有人能就这个问题提出任何想法和解决方案，非常感谢我.....

在此先感谢...

编辑：请您看看下面的图片，这是我放置复选框的位置，单击该复选框不会触发事件...

Answer 1

试试这个，

 $('#Gridparent').on("click", ".chkbxq", function (e) {

       var selected = $(this).is(':checked');

        var grid = $("#grid12").data("kendoGrid");


        if (selected == true) {

            var check = $('.k-detail-row').find('td.k-detail-cell').find('div.k-grid').find('table').find('tbody').find('[type="checkbox"]').attr('checked', true);
            var asd = check.is(':checked');
            alert(asd);
        }

        });

使用网格点击。

Answer 2

这就是我想象的应该如何编码 - 免责声明我根本不懂剑道

如果我们需要在您写的时候处理复选框，我们可以这样做

$(function() {
  $('.chkbxq').on('click', function (e) {
    var checked = this.checked;
    $('#Gridparent').find(".k-detail-row").find('td.k-detail-cell').find('[type="checkbox‌​"]').each(function()
      this.checked=checked; // toggle
    });    
  });    
});        

如果内容是ajaxed，则需要

$(function() {
  $("#Gridparent").on('click','.chkbxq', function (e) {
    var checked = this.checked;
    $(this).find(".k-detail-row").find('td.k-detail-cell').find('[type="checkbox‌​"]').each(function()
      this.checked=checked; // toggle
    });    
  });    
});        

注意 .find 在 dom 中一直有效，所以也许你只是想要

$(this).find('[type="checkbox‌​"]').each(function()

Answer 3

如果有帮助，请参阅以下内容：

 <script type="text/javascript">

   $('.chkbxq').on('click', function (e) {

    alert('1'); // this alert is not firing 

    var checkchildgrid = $('#Gridparent').find(".k-detail-row").find('td.k-detail-cell').find('[type="checkbox‌​"]').prop('checked');
    alert(checkchildgrid);

    if ($(this).prop('checked')) {    
        checkchildgrid.prop('checked', 'checked');
    } else {
        checkchildgrid.prop('checked', false);
    }    
});        

希望对你有帮助。