根据.jqGrid中的第一个复选框选择读取第二个复选框的值

Question

我有一个.jqGrid ，其中有一个用值创建的隐藏复选框列。 要在UI上显示复选框，请使用multiselect: true 。 因此，基本上，我有一组<tr> ，其中隐藏了一个<td> ，它具有一定的价值。 选择显示的<td>时，我想获取隐藏的<td>的值。

在此JSFiddle链接中，我想获取2nd复选框的值（即"NDVoYzZ1aUNYdzAlM2Q1" ），并在用户单击1st时将其推送到数组。 如果用户选择1st和3rd ，则数组应具有2nd and 4th复选框。

我怎样才能做到这一点？

HTML片段：

 <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片段：

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

如果我对jqgrid的理解更多，那么您正在寻找：如何附加点击处理程序以及如何获取第二个复选框。

如果是这样，您可以更改此行：

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

至：

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

请记住，这些ID必须是唯一的。

片段：

 $('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>