How to get the value of checkboxes in a kendo grid

Question

I have a kendo grid that contains two types of rows: one of css class k-master-row which appears when the grid loads initially, and the other is of the css class k-detail-row k-alt which appears when a dropdown is clicked, essentially functioning as a detail for each master row. Each master row has a checkbox of which the value needs to be obtained:

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

Initially, I was getting the value of the the checkbox on the change event like this:

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

This code worked, but because it checks all input checkboxes in all child elements, it was also tracking changes to the two checkboxes in the detail grid beneath it:

<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>

I then tried to get each of the #TOC_ckbx checkboxes in the master row by id using the following, but for some reason, only changes to the checkbox in the first row are being tracked and not any of the checkboxes in the other rows:

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

What is the correct Jquery selector to use in order to get the value of all of the TOC checkboxes on the change event?

A snippet of the html is below (with some of the columns removed to be concise):

<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

JQuery has many ways to select elements by using any CSS Selector or some of it's other built in functions. I have listed some examples below and then a possible solution. I am not familiar with Kendo so you would have to set your data object in the way you know.

//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
            });
        });

Heads up :

The first piece of javascript you gave adds a change event to all inputs with the class .chkbx that have a parent class .k-grid-content in the element with ID #sectionGrid .

The second piece of javascript you have adds a change listener to the element with class .chkbx and ID #TOC_ckbx , which is why it does not work on other inputs

Answer 2

You can try one of these selectors:

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

Or ...

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