javascript - 如何获取 Kendo 网格中复选框的值

Question

我有一个 Kendo 网格，它包含两种类型的行:一种是 css 类 k-master-row，它在网格最初加载时出现，另一种是 css 类 k-detail-row k-alt 单击下拉菜单时出现，本质上用作每个主行的详细信息。每个主行都有一个复选框，需要获取其值:

<td class="" role="gridcell"><input id="TOC_ckbx" name="TOC_ckbx" type="checkbox" value="15" checked="checked" class="chkbx"></td>

最初，我是这样获取更改事件中复选框的值的:

$("#sectionGrid .k-grid-content").on("change", "input.chkbx", function (e) {
            var dataItem = $grid.dataItem($(e.target).closest("tr"));            
            dataItem.set("TocShow", this.checked);
});

此代码有效，但因为它会检查所有子元素中的所有输入复选框，所以它还会跟踪对其下方的详细信息网格中的两个复选框的更改:

<tr data-uid="34d19927-c356-4d6d-9e00-5b470fe369eb" role="row">
<td role="gridcell"><input class="k-checkbox" data-role="checkbox" id="0b1e4591-88c0-4796-aa62-1c9482005be1" aria-label="Select row" aria-checked="false" type="checkbox"><label for="0b1e4591-88c0-4796-aa62-1c9482005be1" class="k-checkbox-label k-no-text">​</label></td>
<td class="" role="gridcell"><input id="FirstRun" name="FirstRun" class="chkbx" type="checkbox" checked=""></td>
<td class="" role="gridcell"><input id="SecondRun" name="SecondRun" type="checkbox" checked="" class="chkbx"></td>
</tr>

然后我尝试使用以下代码通过 id 获取主行中的每个 #TOC_ckbx 复选框，但由于某种原因，仅跟踪对第一行中复选框的更改，而不跟踪其他行中的任何复选框行:

 $("#TOC_ckbx.chkbx").change(function (e) {
            var dataItem = $grid.dataItem($(e.target).closest("tr"));
            dataItem.set("TocShow", this.checked);
        });

为了获得所有的值，正确的 Jquery 选择器是什么？更改事件中的 TOC 复选框？

下面是一段 html(为简洁起见，删除了一些列):

<tbody>
<tr class="k-master-row" data-uid="c5aa3ba6-ecd6-47f3-aeb5-7e5c1111028e" role="row">
    <td class="k-hierarchy-cell" aria-expanded="false"><a class="k-icon k-i-expand" href="#" aria-label="Expand" tabindex="-1"></a></td>
    <td role="gridcell"><input class="k-checkbox" data-role="checkbox" id="01d0ab93-c661-439b-abee-01f9ce34b1b6" aria-label="Select row" aria-checked="false" type="checkbox"><label for="01d0ab93-c661-439b-abee-01f9ce34b1b6" class="k-checkbox-label k-no-text">​</label></td>
    <td style="display:none" class="" role="gridcell">15</td>
    <td style="display:none" class="" role="gridcell">4</td>
    <td class="" role="gridcell">3. Portfolio Characteristics and Investment Results</td>
    <td style="display:none" class="" role="gridcell"></td>
    <td class="" role="gridcell"><input id="TOC_ckbx" name="TOC_ckbx" type="checkbox" value="15" checked="checked" class="chkbx"></td>
    <td style="display:none" class="" role="gridcell">01/01/1900</td>
    <td style="display:none" class="" role="gridcell"></td>
    <td class="" role="gridcell"><span class="sortSpan"> 3 </span></td>
    <td class="" role="gridcell"></td>
    <td class="" role="gridcell"></td>
    <td class="" role="gridcell"></td>
    <td class="" role="gridcell"></td>
 </tr>


<tr class="k-detail-row k-alt">
    <td class="k-hierarchy-cell"></td>
    <td class="k-detail-cell" colspan="8">
    <div class="k-widget k-grid detail-grid k-display-block k-editable" id="grid_14" data-role="grid" style="height: 379px;">
        <div class="k-header k-grid-toolbar k-grid-top"><a class="k-button k-button-icontext k-grid-add" href="/Document/SectionPage?sectionID=%23%3DSectionID%23&amp;documentID=4&amp;_=1544475674808&amp;grid_%23%3DSectionID%23-mode=insert"><span class="k-icon k-i-add"></span>Add Page</a><a class="k-button k-button-icontext k-grid-save-changes" href="javascript:void(0)"><span class="k-icon k-i-check"></span>Save Pages</a><a class="k-button k-button-icontext k-grid-cancel-changes" href="javascript:void(0)"><span class="k-icon k-i-cancel"></span>Cancel changes</a></div>
        <div class="k-grid-header" style="padding-right: 17px;">
            <div class="k-grid-header-wrap k-auto-scrollable">
                <table role="grid">
                <colgroup>
                    <col style="width:60px">
                    <col style="width:225px">
                    <col style="width:300px">
                    <col style="width:120px">
                    <col>
                    <col>
                    <col>
                    <col>
                    <col>
                    <col style="width:110px">
                    <col style="width:110px">
                </colgroup>
                <thead role="rowgroup">
                    <tr role="row">
                        <th class="k-header" scope="col" data-index="0"><span class="k-link">Delete</span></th>
                        <th class="k-header" data-field="SectionPageID" data-index="1" data-title="Section Page ID" scope="col" style="display:none" data-role="columnsorter"><a class="k-link" href="/Document/SectionPage?sectionID=%23%3DSectionID%23&amp;documentID=4&amp;_=1544475674808&amp;grid_%23%3DSectionID%23-sort=SectionPageID-asc">Section Page ID</a></th>
                        <th class="k-header" data-field="SectionID" data-index="2" data-title="Section ID" scope="col" style="display:none" data-role="columnsorter"><a class="k-link" href="/Document/SectionPage?sectionID=%23%3DSectionID%23&amp;documentID=4&amp;_=1544475674808&amp;grid_%23%3DSectionID%23-sort=SectionID-asc">Section ID</a></th>
                        <th class="k-header" data-field="PageID" data-index="3" data-title="Page ID" scope="col" style="display:none" data-role="columnsorter"><a class="k-link" href="/Document/SectionPage?sectionID=%23%3DSectionID%23&amp;documentID=4&amp;_=1544475674808&amp;grid_%23%3DSectionID%23-sort=PageID-asc">Page ID</a></th>
                        <th class="k-header" data-field="PageCD" data-index="4" data-title="Page" scope="col" data-role="columnsorter"><a class="k-link" href="/Document/SectionPage?sectionID=%23%3DSectionID%23&amp;documentID=4&amp;_=1544475674808&amp;grid_%23%3DSectionID%23-sort=PageCD-asc">Page</a></th>
                        <th class="k-header" data-field="PageTitle" data-index="5" data-title="Page Title" scope="col" style="display:none" data-role="columnsorter"><a class="k-link" href="/Document/SectionPage?sectionID=%23%3DSectionID%23&amp;documentID=4&amp;_=1544475674808&amp;grid_%23%3DSectionID%23-sort=PageTitle-asc">Page Title</a></th>
                        <th class="k-header" data-field="PageTitleOverride" data-index="6" data-title="Page Title Override" scope="col" data-role="columnsorter"><a class="k-link" href="/Document/SectionPage?sectionID=%23%3DSectionID%23&amp;documentID=4&amp;_=1544475674808&amp;grid_%23%3DSectionID%23-sort=PageTitleOverride-asc">Page Title Override</a></th>
                    </tr>
                </thead>
                </table>
            </div>
        </div>
        <div class="k-grid-content" style="height: 307px;">
            <table role="grid" data-role="sortable">

                <tbody role="rowgroup">
                <tr data-uid="34d19927-c356-4d6d-9e00-5b470fe369eb" role="row">
                    <td role="gridcell"><input class="k-checkbox" data-role="checkbox" id="0b1e4591-88c0-4796-aa62-1c9482005be1" aria-label="Select row" aria-checked="false" type="checkbox"><label for="0b1e4591-88c0-4796-aa62-1c9482005be1" class="k-checkbox-label k-no-text">​</label></td>
                    <td class="" role="gridcell"><input id="FirstRun" name="FirstRun" class="chkbx" type="checkbox" checked=""></td>
                    <td class="" role="gridcell"><input id="SecondRun" name="SecondRun" type="checkbox" checked="" class="chkbx"></td>
                </tr>

                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script>
        kendo.syncReady(function(){jQuery("#grid_14").kendoGrid({"dataBound":detailGrid_onDataBound,"saveChanges":detailGrid_onSaveChanges,"edit":detailGrid_onEdit,"columns":[{"width":"60px","selectable":true},{"title":"Section Page ID","headerAttributes":{"data-field":"SectionPageID","data-title":"Section Page ID"},"hidden":true,"field":"SectionPageID","encoded":true,"editor":"<input class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field SectionPageID must be a number.\" id=\"SectionPageID\" name=\"SectionPageID\" type=\"number\" value=\"\" /><span class=\"field-validation-valid\" data-valmsg-for=\"SectionPageID\" data-valmsg-replace=\"true\"></span>"},{"title":"Section ID","headerAttributes":{"data-field":"SectionID","data-title":"Section ID"},"hidden":true,"field":"SectionID","encoded":true,"editor":"<input class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field SectionID must be a number.\" id=\"SectionID\" name=\"SectionID\" type=\"number\" value=\"\" /><span class=\"field-validation-valid\" data-valmsg-for=\"SectionID\" data-valmsg-replace=\"true\"></span>"},{"title":"Page ID","headerAttributes":{"data-field":"PageID","data-title":"Page ID"},"hidden":true,"field":"PageID","encoded":true,"editor":"<input class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field PageID must be a number.\" id=\"PageID\" name=\"PageID\" type=\"number\" value=\"\" /><span class=\"field-validation-valid\" data-valmsg-for=\"PageID\" data-valmsg-replace=\"true\"></span>"},{"title":"Page","headerAttributes":{"data-field":"PageCD","data-title":"Page"},"width":"225px","field":"PageCD","encoded":true,"editor":"<input id=\"PageCD\" name=\"PageCD\" type=\"text\" /><script>  kendo.syncReady(function(){jQuery(\"#PageCD\").kendoDropDownList({\"dataSource\":{\"transport\":{\"read\":{\"url\":\"/Document/GetDropDownListItems?parentKey=Page_CD\u0026fieldText=Lookup\u0026fieldValue=LookupValue\u0026isSP=False\u0026includeValue=%20\"},\"prefix\":\"\"},\"schema\":{\"errors\":\"Errors\"}},\"dataTextField\":\"Text\",\"dataValueField\":\"Text\"});});<\/script><span class=\"field-validation-valid\" data-valmsg-for=\"PageCD\" data-valmsg-replace=\"true\"></span>"},{"title":"Page Title","headerAttributes":{"data-field":"PageTitle","data-title":"Page Title"},"hidden":true,"field":"PageTitle","encoded":true},{"title":"Page Title Override","headerAttributes":{"data-field":"PageTitleOverride","data-title":"Page Title Override"},"width":"300px","field":"PageTitleOverride","encoded":true,"editor":"<input class=\"text-box single-line\" id=\"PageTitleOverride\" name=\"PageTitleOverride\" type=\"text\" value=\"\" /><span class=\"field-validation-valid\" data-valmsg-for=\"PageTitleOverride\" data-valmsg-replace=\"true\"></span>"},{"title":"Account ID","headerAttributes":{"data-field":"AccountID","data-title":"Account ID"},"hidden":true,"field":"AccountID","encoded":true,"editor":"<input class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field AccountID must be a number.\" id=\"AccountID\" name=\"AccountID\" type=\"number\" value=\"\" /><span class=\"field-validation-valid\" data-valmsg-for=\"AccountID\" data-valmsg-replace=\"true\"></span>"},{"title":"Account","headerAttributes":{"data-field":"AccountCD","data-title":"Account"},"width":"120px","field":"AccountCD","encoded":true,"editor":"<input id=\"AccountCD\" name=\"AccountCD\" type=\"text\" /><script> kendo.syncReady(function(){jQuery(\"#AccountCD\").kendoAutoComplete({\"dataSource\":{\"transport\":{\"read\":{\"url\":\"/Document/GetAutoCompleteItems\",\"data\":txtFilterValue_onAdditionalData},\"prefix\":\"\"},\"schema\":{\"errors\":\"Errors\"}}});});<\/script><span class=\"field-validation-valid\" data-valmsg-for=\"AccountCD\" data-valmsg-replace=\"true\"></span>"},{"title":"Effective Date","headerAttributes":{"data-field":"EffectiveDate","data-title":"Effective Date"},"hidden":true,"width":"60px","field":"EffectiveDate","format":"{0:MM/dd/yyyy}","encoded":true,"editor":"<input class=\"text-box single-line\" data-val=\"true\" data-val-date=\"The field EffectiveDate must be a date.\" id=\"EffectiveDate\" name=\"EffectiveDate\" type=\"datetime\" value=\"\" /><span class=\"field-validation-valid\" data-valmsg-for=\"EffectiveDate\" data-valmsg-replace=\"true\"></span>"},{"title":"End Date","headerAttributes":{"data-field":"EndDate","data-title":"End Date"},"hidden":true,"width":"60px","field":"EndDate","format":"{0:MM/dd/yyyy}","encoded":true,"editor":"<input class=\"text-box single-line\" data-val=\"true\" data-val-date=\"The field EndDate must be a date.\" id=\"EndDate\" name=\"EndDate\" type=\"datetime\" value=\"\" /><span class=\"field-validation-valid\" data-valmsg-for=\"EndDate\" data-valmsg-replace=\"true\"></span>"},{"title":"Sort Order","headerAttributes":{"data-field":"SPSortOrder","data-title":"Sort Order"},"template":"<span class='spSortSpan'>#if(SPSortOrder != null) {# #=SPSortOrder# #} else {# #=0# #}#</span>","field":"SPSortOrder","encoded":true,"editor":"<input class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field SPSortOrder must be a number.\" id=\"SPSortOrder\" name=\"SPSortOrder\" type=\"number\" value=\"\" /><span class=\"field-validation-valid\" data-valmsg-for=\"SPSortOrder\" data-valmsg-replace=\"true\"></span>"},{"title":"Added By","headerAttributes":{"data-field":"AddedBy","data-title":"Added By"},"field":"AddedBy","encoded":true},{"title":"Added On","headerAttributes":{"data-field":"AddedOn","data-title":"Added On"},"field":"AddedOn","format":"{0:MM/dd/yyyy}","encoded":true},{"title":"Updated By","headerAttributes":{"data-field":"UpdatedBy","data-title":"Updated By"},"field":"UpdatedBy","encoded":true},{"title":"Updated On","headerAttributes":{"data-field":"UpdatedOn","data-title":"Updated On"},"field":"UpdatedOn","format":"{0:MM/dd/yyyy}","encoded":true},{"title":"First Run","headerAttributes":{"data-field":"FirstRun","data-title":"First Run"},"width":"110px","template":"<input id='FirstRun' name='FirstRun' class='chkbx'  type='checkbox'  #= FirstRun ? checked='checked' : '' #/>","field":"FirstRun","encoded":true,"editor":"<input class=\"check-box\" data-val=\"true\" data-val-required=\"The FirstRun field is required.\" id=\"FirstRun\" name=\"FirstRun\" type=\"checkbox\" value=\"true\" /><input name=\"FirstRun\" type=\"hidden\" value=\"false\" /><span class=\"field-validation-valid\" data-valmsg-for=\"FirstRun\" data-valmsg-replace=\"true\"></span>"},{"title":"Second Run","headerAttributes":{"data-field":"SecondRun","data-title":"Second Run"},"width":"110px","template":"<input id='SecondRun' name='SecondRun' type='checkbox' #= SecondRun ? checked='checked' : '' # class='chkbx'/>","field":"SecondRun","encoded":true,"editor":"<input class=\"check-box\" data-val=\"true\" data-val-required=\"The SecondRun field is required.\" id=\"SecondRun\" name=\"SecondRun\" type=\"checkbox\" value=\"true\" /><input name=\"SecondRun\" type=\"hidden\" value=\"false\" /><span class=\"field-validation-valid\" data-valmsg-for=\"SecondRun\" data-valmsg-replace=\"true\"></span>"}],"sortable":true,"scrollable":{"height":"200px"},"editable":{"confirmation":"Are you sure you want to delete this record?","confirmDelete":"Delete","cancelDelete":"Cancel","mode":"incell","template":null,"create":true,"update":true,"destroy":true},"toolbar":{"command":[{"name":null,"buttonType":"ImageAndText","text":"Add Page"},{"name":null,"buttonType":"ImageAndText"}]},"messages":{"noRecords":"No records available."},"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/Document/SectionPage?sectionID=14"},"prefix":"","update":{"url":"/Document/SectionPage_Update"},"create":{"url":"/Document/SectionPage_Create"},"destroy":{"url":"/Document/SectionPage_Delete"}},"error":detailGridDS_onError,"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"SectionPageID","fields":{"SectionPageID":{"type":"number","defaultValue":null},"SectionID":{"type":"number","defaultValue":null},"PageID":{"type":"number","defaultValue":null},"PageCD":{"type":"string"},"PageTitle":{"editable":false,"type":"string"},"PageTitleOverride":{"type":"string"},"AccountID":{"type":"number","defaultValue":null},"AccountCD":{"type":"string"},"EffectiveDate":{"type":"date","defaultValue":null},"EndDate":{"type":"date","defaultValue":null},"SPSortOrder":{"type":"number","defaultValue":null},"AddedBy":{"editable":false,"type":"string"},"AddedOn":{"editable":false,"type":"date","defaultValue":null},"UpdatedBy":{"editable":false,"type":"string"},"UpdatedOn":{"editable":false,"type":"date","defaultValue":null},"FirstRun":{"type":"boolean"},"SecondRun":{"type":"boolean"}}}}}});});
    </script>
    </td>
</tr>
</tbody>           

Answer 1

您可以尝试以下选择器之一:

// Adding input 'name' attribute
$("#sectionGrid .k-grid-content").on("change", 'input.chkbx[name="TOC_ckbx"]', function (e) {

或者……

// Filtering by only those inputs under 'td' and 'tr.k-master-row'
$("#sectionGrid .k-grid-content").on("change", 'tr.k-master-row > td > input.chkbx', function (e) {