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必须是唯一的。

摘录：

＆＃13;

$('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);
});

＆＃13;

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

＆＃13;

根据.jqGrid

1 个答案: