Как получить значение флажков в сетке кендо

У меня есть сетка кендо, которая содержит два типа строк: одна относится к классу 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&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>           
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
2 698
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

В 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, поэтому он не работает на других входах.

Я предположил, что когда вы сказали «Все блоки оглавления», вы имели в виду единственное поле оглавления в каждом наборе основных строк (родительских строк)?

user8020219 11.12.2018 01:01
Ответ принят как подходящий

Вы можете попробовать один из этих селекторов:

// 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) {

Другие вопросы по теме