У меня есть сетка кендо, которая содержит два типа строк: одна относится к классу 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>
Затем я попытался получить каждый из флажков #TOC_ckbx в главной строке по идентификатору, используя следующий идентификатор, но по какой-то причине отслеживаются только изменения флажка в первой строке, а не какие-либо флажки в других строках:
$("#TOC_ckbx.chkbx").change(function (e) {
var dataItem = $grid.dataItem($(e.target).closest("tr"));
dataItem.set("TocShow", this.checked);
});
Каков правильный селектор JQuery, который нужно использовать, чтобы получить значение всех флажков оглавления в событии изменения?
Ниже приведен фрагмент 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&documentID=4&_=1544475674808&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&documentID=4&_=1544475674808&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&documentID=4&_=1544475674808&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&documentID=4&_=1544475674808&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&documentID=4&_=1544475674808&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&documentID=4&_=1544475674808&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&documentID=4&_=1544475674808&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>



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


В JQuery есть много способов выбора элементов с помощью любого CSS-селектора или некоторых других встроенных функций. Ниже я привел несколько примеров, а затем - возможное решение. Я не знаком с Кендо, поэтому вам придется настроить свой объект данных так, как вы знаете.
//Examples
$('.parentSelector').each(function () {
//$(this) is the JQuery version of this
var parent = $(this);
//When looking for something that is a child element of a parent in an .each() or some other loop you can do it like this.
var exampleChild = $(".class", $(this));
//Example : Looking for in the container / parent for the second checkbox with the class .chkbx, id TOC_ckbx, name TOC_ckbx which is the 5th element
//Find by ID - Will make the first ID it finds, IDs must be unique
var findByID = $("#TOC_chkbx");
//Find by index of children element in parent
var findByIndex = $("*:nth-child('5')");
//Find the second input in the parent
var secondCheckBox = $('input', parent).eq(1);
//Find the first element with the class .chkbx
var firstOfClass = $('.chkbx', parent).eq(0);
//Find the first input with the name "TOC_ckbx" : There are many other regex formulas you can use
var attributeWithValue = $("input[name='TOC_ckbx']'", parent);
});
//A solution for you
$('.parentSelector').each(function () {
//Getting value by index(first) of class
var myTargetValue = $('.chkbx', $(this)).eq(0).val();
// When any checkbox is changed within the parent
$('input:checkbox', $(this)).on('change', function () {
// Do something with myTargetValue
// Not familiar with Kendo to give anything useful
});
});
Берегись :
Первый предоставленный вами фрагмент javascript добавляет событие изменения ко всем inputs с классом .chkbx, у которых есть родительский класс .k-grid-content в элементе с идентификатором #sectionGrid.
Второй фрагмент javascript, который у вас есть, добавляет слушателя изменений к элементу с классом .chkbx и идентификатором #TOC_ckbx, поэтому он не работает на других входах.
Вы можете попробовать один из этих селекторов:
// 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) {
Я предположил, что когда вы сказали «Все блоки оглавления», вы имели в виду единственное поле оглавления в каждом наборе основных строк (родительских строк)?