根据.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>