Read second checkbox value based on first check box selection in .jqGrid

Question

I have a .jqGrid where there is a hidden checkbox column created with value. To display a check box on UI, multiselect: true is used. So basically, I have a set of <tr> where one <td> is hidden which has some value. I want to get the value of hidden <td> when displayed <td> is selected.

In this JSFiddle link, I want to get the value of 2nd checkbox (which is "NDVoYzZ1aUNYdzAlM2Q1" ) and push it to an array when the user clicks on 1st . If the user selects 1st and 3rd than array should have values of 2nd and 4th checkbox.

How can I do that?

HTML Snippet:

 <tr role="row" id="0" tabindex="-1" class="ui-widget-content jqgrow ui-row-ltr ui-state-highlight" aria-selected="true">
      <td role="gridcell" style="text-align:center;width: 20px;" aria-describedby="grid_cb">
        <input role="checkbox" type="checkbox" id="jqg_grid_0" class="cbox" name="jqg_grid_0"> 1st
      </td>
      <!-- HIDDEN TD  --> 
      <td role="gridcell" style="text-align:center;display:none;" title="" aria-describedby="grid_check">
        <input type="checkbox" value="NDVoYzZ1aUNYdzAlM2Q1" name="Restaurants" id="Restaurants"> 2nd
      </td>
    </tr>
    </br>
    <tr role="row" id="1" tabindex="-1" class="ui-widget-content jqgrow ui-row-ltr">
      <td role="gridcell" style="text-align:center;" aria-describedby="grid_cb">
        <input role="checkbox" type="checkbox" id="jqg_grid_1" class="cbox" name="jqg_grid_1"> 3rd
      </td>
      <!-- HIDDEN TD  --> 
      <td role="gridcell" style="text-align:center;display:none;" title="" aria-describedby="grid_check">
        <input type="checkbox" value="QjBENlRFMW83SVElM2Q1" name="Restaurants" id="Restaurants"> 4th
      </td>
    </tr>

.js Snippet:

var res = [];
$('input[type=checkbox]:checked')
  .each(function() {
    res.push($(this).eq(1).val());
  });

if (res.length == 0) {
  alert('You should select at least one option.');
  return;
}

alert("Values: " + res);

Answer 1

If I understood correctly more then jqgrid you are looking for: how attach the click handler and how to get the second checkbox....

If it is so you can change this line:

res.push($(this).eq(1).val());

to:

res.push($(this).closest('td').next('td').find('input[type=checkbox]').val());

Remember, the IDs must be unique.

The snippet:

 $('input[type=checkbox]').on('change', function (e) { var res = []; $('input[type=checkbox]:checked').each(function (idx, ele) { res.push($(this).closest('td').next('td').find('input[type=checkbox]').val()); }); if (res.length == 0) { console.log('You should select at least one option.'); return; } console.log("Values: " + res); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr role="row" id="0" tabindex="-1" class="ui-widget-content jqgrow ui-row-ltr ui-state-highlight" aria-selected="true"> <td role="gridcell" style="text-align:center;width: 20px;" aria-describedby="grid_cb"> <input role="checkbox" type="checkbox" id="jqg_grid_0" class="cbox" name="jqg_grid_0"> 1st </td> <!-- HIDDEN TD --> <td role="gridcell" style="text-align:center;display:none;" title="" aria-describedby="grid_check"> <input type="checkbox" value="NDVoYzZ1aUNYdzAlM2Q1" name="Restaurants" id="Restaurants1"> 2nd </td> </tr> </br> <tr role="row" id="1" tabindex="-1" class="ui-widget-content jqgrow ui-row-ltr"> <td role="gridcell" style="text-align:center;" aria-describedby="grid_cb"> <input role="checkbox" type="checkbox" id="jqg_grid_1" class="cbox" name="jqg_grid_1"> 3rd </td> <!-- HIDDEN TD --> <td role="gridcell" style="text-align:center;display:none;" title="" aria-describedby="grid_check"> <input type="checkbox" value="QjBENlRFMW83SVElM2Q1" name="Restaurants" id="Restaurants2"> 4th </td> </tr> </tbody> </table>