根據.jqGrid中的第一個複選框選擇讀取第二個複選框值

我有一個.jqGrid，其中存在一個使用值創建的隱藏複選框列。要在UI上顯示覆選框，請使用multiselect: true。所以基本上，我有一套<tr>，其中一個<td>是隱藏的，有一定的價值。我想要在顯示<td>時顯示隱藏的<td>的值。根據.jqGrid中的第一個複選框選擇讀取第二個複選框值

在這種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);

來源

2017-08-15 CSharper

你的問題配製僅基於HTML片段。很難理解你想要實現什麼。你想在加載數據的時候「預先選擇」一些jqGrid行嗎？你可以使用哪些**版本的jqGrid（可以使用）以及從哪個** fork **的jqGrid（[免費jqGrid]（https://github.com/free-jqgrid/jqGrid），商業版）[Guriddo jqGrid JS ]（http://guriddo.net/?page_id=103334）或版本<= 4.7中的舊jqGrid）？哪個'datatype'有網格？使用JavaScript數據（jqGrid的「數據」）處理DOM的速度要快得多（像hdden單元的隱藏chackboxs的「值」）。 – Oleg

對不起，我感到困惑。我不想「預先選擇」。我想要隱藏的'td'值在服務器端傳遞它。 'dataType'是'json'和'jqGrid'版本是'4.4.0（舊的）'。 'onSelectRow'和'onSelectAll'用於保存用戶選擇的值。 – CSharper

首先，jqGrid 4.4.0更像5年前的版本，並且已經過去多年。嚴格推薦升級jqGrid。秒，目前還不清楚像「 2nd'這樣的奇怪信息是如何進入隱藏列的。您的HTML片段包含「id」重複項（請參閱兩列中的id =「餐廳」）。你使用*自定義格式化程序*還是從服務器獲取這樣的數據？你可以發佈一個** JavaScript代碼**創建網格的例子嗎？一般來說，您可以使用'getCell'或'getRowData'方法來獲取數據 – Oleg

如果我理解正確那麼多的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>

來源

2017-08-15 16:48:05 gaetanoM

這就是我一直在尋找的。此外，'jqGrid'創建的ID將是唯一的（即'jqg_grid_0'，'jqg_grid_1'等等）。 – CSharper

@CSharper不客氣 – gaetanoM

根據.jqGrid中的第一個複選框選擇讀取第二個複選框值

回答

相關問題