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

【问题标题】：Read second checkbox value based on first check box selection in .jqGrid根据 .jqGrid 中的第一个复选框选择读取第二个复选框值
【发布时间】：2018-01-23 15:06:56
【问题描述】：

我有一个.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);

【问题讨论】：

您的问题仅基于 HTML 片段制定。很难理解您尝试实施的内容。您想在加载数据期间“预选”一些 jqGrid 行吗？您使用（可以使用）jqGrid 的哪个版本，以及 jqGrid 的哪个fork（free jqGrid、商业Guriddo jqGrid JS 或版本 datatype 有网格？使用 JavaScript 数据（jqGrid 的data）比使用 DOM（比如 hdden 单元的隐藏框的value）要快得多。
很抱歉给您带来了困惑。我不想pre-select。我想要隐藏的 td 值在服务器端传递它。 `dataType` 是 'json`，jqGrid 版本是 4.4.0 (old one)。 onSelectRow 和 onSelectAll 用于保留用户选择的值。
首先，jqGrid 4.4.0 已经 5 岁多了，而且已经死了很多年。强烈建议升级 jqGrid。秒，尚不清楚<input type="checkbox" value="NDVoYzZ1aUNYdzAlM2Q1" name="Restaurants" id="Restaurants"> 2nd 之类的奇怪信息是如何进入隐藏列的。您的 HTML 片段包含 id 重复项（请参阅两列中的 id="Restaurants"）。您是使用 custom formatter 还是从服务器获取此类数据？您能否发布一个创建网格的 JavaScript 代码 示例？一般可以使用getCell或getRowData方法获取数据

标签： javascript jquery html checkbox jqgrid

【解决方案1】：

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

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

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

到：

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

记住，ID 必须是唯一的。

sn-p：

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

【讨论】：

这就是我要找的。此外，jqGrid 创建的 id 将是唯一的（即jqg_grid_0、jqg_grid_1 等）。