复选框始终处于未选中状态 [英] Checkbox is always coming as unchecked

问题描述

我有以下Kendo Grid和相关的jQuery.单击按钮后，我需要知道是否已选中复选框.但是目前它总是显示"false".我们该如何纠正呢?

I have following Kendo Grid ans associated jQuery. On a button click, I need to know whether checkbox is checked. But at present it is showing 'false' always. How can we correct it?

@Scripts.Render("~/bundles/jquery")
<script type="text/javascript">

    $(document).ready(function ()
    {

        $('#btnMove').click(function () {


            var sourcegrid = $('#GridParent').data('kendoGrid');        //SOURCE GRID
            var destinationgrid = $('#ChildGrid').data('kendoGrid'); // DESTINATION GRID

            alert('Button Clicked');

            var grid = $("#GridParent").data("kendoGrid");
            var datatItem = grid.dataItem(grid.tbody.find('tr:eq(2)'));
            var selectedTd = $(datatItem).find('td:eq(0)').is(':checked');
            alert(selectedTd);

            //destinationgrid.dataSource.add(datatItem);

</script>
@model IEnumerable<KendoPratapSampleMVCApp.Models.StudentDetails>
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
@using (Html.BeginForm())
{ 
    @(Html.Kendo().Grid<KendoPratapSampleMVCApp.Models.StudentDetails>()    
    .Name("GridParent")
    .Columns(columns => {
        columns.Bound(p => p.studentclass).HeaderTemplate("<input id='selectall' class='chkbx' type='checkbox' onclick='ToggleChkBox(this.checked);' />").ClientTemplate("<input id='checkbox' onclick='grdChkBoxClick(this); ' class='chkbxq' type='checkbox' />").Sortable(false).Filterable(false).Width(30);
        columns.Bound(p => p.studentId).Filterable(false).Width(90);
        columns.Bound(p => p.studentName).Filterable(false).Width(90);
        columns.Bound(p => p.StudentBranch).Filterable(false).Width(90);

    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
    .Selectable(s => s.Mode(GridSelectionMode.Multiple))
    .HtmlAttributes(new { style = "height:250px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Orders_Read", "StudentDtls"))
     )
  )

    <input id="btnMove" type="button" value="Move" />

更新:图片

编辑:HTML标记

  <h2>Index</h2>
    <form action="/StudentDtls" method="post"><div class="k-widget&#32;k-grid" id="GridParent" style="height:250px;"><div class="k-grid-header"><div class="k-grid-header-wrap"><table><colgroup><col style="width:30px" /><col style="width:90px" /><col style="width:90px" /><col style="width:90px" /></colgroup><tr><th class="k-header" data-field="studentclass" data-title="studentclass" scope="col"><input id='selectall' class='chkbx' type='checkbox' onclick='ToggleChkBox(this.checked);' /></th><th class="k-header" data-field="studentId" data-title="student&#32;Id" scope="col"><a class="k-link" href="/StudentDtls/Orders_Read?GridParent-sort=studentId-asc">student Id</a></th><th class="k-header" data-field="studentName" data-title="student&#32;Name" scope="col"><a class="k-link" href="/StudentDtls/Orders_Read?GridParent-sort=studentName-asc">student Name</a></th><th class="k-header" data-field="StudentBranch" data-title="Student&#32;Branch" scope="col"><a class="k-link" href="/StudentDtls/Orders_Read?GridParent-sort=StudentBranch-asc">Student Branch</a></th></tr></table></div></div><div class="k-grid-content" style="height:200px"><table><colgroup><col style="width:30px" /><col style="width:90px" /><col style="width:90px" /><col style="width:90px" /></colgroup><tbody><tr class="t-no-data"><td colspan="4"></td></tr></tbody></table></div><div class="k-pager-wrap&#32;k-grid-pager"><a class="k-link&#32;k-state-disabled" data-page="1" href="#" title="Go&#32;to&#32;the&#32;first&#32;page"><span class="k-icon&#32;k-i-seek-w">seek-w</span></a><a class="k-link&#32;k-state-disabled" data-page="0" href="#" title="Go&#32;to&#32;the&#32;previous&#32;page"><span class="k-icon&#32;k-i-arrow-w">arrow-w</span></a><ul class="k-pager-numbers&#32;k-reset"><li><span class="k-state-selected" data-page="1">1</span></li></ul><a class="k-link&#32;k-state-disabled" data-page="2" href="#" title="Go&#32;to&#32;the&#32;next&#32;page"><span class="k-icon&#32;k-i-arrow-e">arrow-e</span></a><a class="k-link&#32;k-state-disabled" data-page="1" href="#" title="Go&#32;to&#32;the&#32;last&#32;page"><span class="k-icon&#32;k-i-seek-e">seek-e</span></a><span class="k-pager-info&#32;k-label">No items to display</span></div></div><script>
        jQuery(function(){jQuery("#GridParent").kendoGrid({"columns":[{"title":"studentclass","width":"30px","template":"\u003cinput id=\u0027checkbox\u0027 onclick=\u0027grdChkBoxClick(this); \u0027 class=\u0027chkbxq\u0027 type=\u0027checkbox\u0027 /\u003e","field":"studentclass","sortable":false,"filterable":false,"encoded":true},{"title":"student Id","width":"90px","field":"studentId","filterable":false,"encoded":true},{"title":"student Name","width":"90px","field":"studentName","filterable":false,"encoded":true},{"title":"Student Branch","width":"90px","field":"StudentBranch","filterable":false,"encoded":true}],"pageable":{"buttonCount":10},"sortable":true,"selectable":"Multiple, Row","filterable":true,"resizable":true,"reorderable":true,"dataSource":{"transport":{"prefix":"","read":{"url":"/StudentDtls/Orders_Read"}},"pageSize":20,"page":1,"total":0,"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"type":"aspnetmvc-ajax","filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"studentId":{"type":"string"},"studentName":{"type":"string"},"StudentBranch":{"type":"string"},"studentclass":{"type":"number"}}}}}});});

推荐答案

尝试这段代码，

 $('#Submit1').click(function () {

            var grid = $("#grid12").data("kendoGrid");
            var selected = grid.tbody.find('td').find('.chkbxq').is(':checked');
            var checkid = grid.tbody.find('td').find('.chkbxq').attr('id');
            var cellIndex = grid.tbody.find('td').find('.chkbxq:checked').parent().index();
            var rowIndex = grid.tbody.find('td').find('.chkbxq:checked').parent().parent().index();
            var dataitem = grid.dataItem(grid.tbody.find('tr:eq(' + rowIndex + ')'));

            sampleItem = dataitem.SampleItems;
            sampleCode = dataitem.SampleCode;
            sampledescription = dataitem.SampleDescription;

            alert(sampleItem + "--" + sampleCode + "--" + sampledescription);

        });

我的网格

 <input id="Submit1" type="button" value="SubmitValue" />
 @(Html.Kendo().Grid<TwoModelInSinglePageModel.SampleModel>()
    .Name("grid12")
    .Columns(columns =>
    {
        columns.Bound(p => p.studentclass).HeaderTemplate("<input id='selectall' class='chkbxq' type='checkbox'  />").ClientTemplate("<input id='checkbox' class='chkbxq' type='checkbox' />");
        columns.Bound(p => p.SampleDescription);
        columns.Bound(p => p.SampleCode);
        columns.Bound(p => p.SampleItems);
    })
        .AutoBind(true) // here I am disabling automatic binding at page load
       .DataSource(dataSource => dataSource
        .Ajax()
            .Read(read => read.Action("Read", "Test"))
     )
  )

这篇关于复选框始终处于未选中状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！