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

Question

我有一个.jqGrid其中有一个用值创建的隐藏复选框列。要在 UI 上显示复选框，multiselect: true用来。所以基本上，我有一组 <tr>哪里有一个<td>是隐藏的，有一定的值(value)。 我想获取隐藏<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>