CODEWITHSUNDEEP
javascriptjqueryhtmlcheckboxjqgrid
GThree
GThree

Reputation: 3530

Read second checkbox value based on first check box selection in .jqGrid

I have a .jqGrid where there is a hidden checkbox column created with value. To display a check box on UI, multiselect: true is used. So basically, I have a set of <tr> where one <td> is hidden which has some value. I want to get the value of hidden <td> when displayed <td> is selected.

In this JSFiddle link, I want to get the value of 2nd checkbox (which is"NDVoYzZ1aUNYdzAlM2Q1") and push it to an array when the user clicks on 1st. If the user selects 1st and 3rd than array should have values of 2nd and 4th checkbox.

How can I do that?

HTML Snippet:

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

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

Upvotes: 0

Views: 561

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

If I understood correctly more then jqgrid you are looking for: how attach the click handler and how to get the second checkbox....

If it is so you can change this line:

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

to:

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

Remember, the IDs must be unique.

The snippet:

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

Upvotes: 1

Related Questions