复选框事件未使用jQuery触发

Question

我在使用Kendo UI的层次结构网格模式下，在父网格中有复选框行，在子网格中有复选框行。 建筑就是这样...

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

如果我单击父网格行中的复选框，则只需要访问与此行相关的子网格列中的复选框，并且需要将该子网格的checked属性设置为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
    });    
  });    
});        

如果内容被压缩，则需要

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

我希望这会有所帮助。