How to get value and text row checked in table using Jquery?

Question

I have a table with struct follow, I want to get value row checkbox in table using jquery.Example:

<table border="1" width="100%">
    <thead>
        <tr>
            <td><input type='checkbox' />No</td>
            <td>Header Col2</td>
            <td>Header Col3</td>
        </tr>
    </thead>
    <tbody><tr>
<td><input  type="checkbox" class="chk" name="chk_id_local" id="bt_check" value="L01"/>&nbsp;1</td>
<td> Row 1</td>
<td> Row 1</td>
</tr>
        <tr>
<td><input  type="checkbox" class="chk" name="chk_id_local" id="bt_check" value="L02"/>&nbsp;2</td>
<td> Row 2</td>
<td> Row 22</td>
</tr>
        <tr>
<td><input  type="checkbox" class="chk" name="chk_id_local" id="bt_check" value="L03"/>&nbsp;3</td>
<td> Row 3</td>
<td> Row 333</td>
</tr>
    </tbody>
</table><br>
<button id="bt1">Get</button>

And now, when I click checkbox a row in table, then i click button Get , I will get value in row follow. Example click checkbox row 2 and click button Get, value with return: L02,2,Row 2,Row 22 . Thank for your advice.

On clicking in the checkbox you have to add a specific class to that row (tr) or use the id and then, when you click the button GET, you can take the info of the row using closest() or other functions to moving along the DOM — JuaRoAl
– JuaRoAl, Commented Mar 20, 2015 at 16:03
The solution also depends if you only can click one checkbox or you can select all checkboxes that you want. — JuaRoAl
– JuaRoAl, Commented Mar 20, 2015 at 16:16

Nipuna · Accepted Answer · 2015-03-21 03:36:53Z

You can do like this

$('#bt1').on('click', function () {
    //Get checked checkboxes
    var checkedCheckboxes = $("#tbl1 :checkbox:checked"),
        arr = [];

    //For each checkbox
    for (var i = 0; i < checkedCheckboxes.length; i++) {

        //Get checkbox
        var checkbox = $(checkedCheckboxes[i]);

        //Get checkbox value
        var checkboxValue = checkbox.val();

        //Get siblings
        var siblings = checkbox.parent().siblings();

        //Get values of siblings
        var value1 = $(siblings[0]).text();
        var value2 = $(siblings[1]).text();

        arr.push(checkboxValue + '-' + value1 + '/' + value2);
    }
});

Changes to HTML

Gave an ID to table element to optimize selection. (See Optimize selectors)
Gave a unique ID to checkboxes (Not really necessary for the code snippet above)

$('#bt1').on('click', function() {
  //Get checked checkboxes
  var checkedCheckboxes = $("#tbl1 :checkbox:checked"),
    arr = [];

  //For each checkbox
  for (var i = 0; i < checkedCheckboxes.length; i++) {

    //Get checkbox
    var checkbox = $(checkedCheckboxes[i]);

    //Get checkbox value
    var checkboxValue = checkbox.val();

    //Get siblings
    var siblings = checkbox.parent().siblings();

    //Get values of siblings
    var value1 = $(siblings[0]).text();
    var value2 = $(siblings[1]).text();

    arr.push(checkboxValue + '-' + value1 + '/' + value2);
    alert(checkboxValue + '-' + value1 + '/' + value2);

  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl1" border="1" width="100%">
  <thead>
    <tr>
      <td>
        <input type='checkbox' />No</td>
      <td>Header Col2</td>
      <td>Header Col3</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" class="chk" name="chk_id_local" id="bt_check1" value="L01" />&nbsp;1</td>
      <td>Row 1</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="chk" name="chk_id_local" id="bt_check2" value="L02" />&nbsp;2</td>
      <td>Row 2</td>
      <td>Row 22</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="chk" name="chk_id_local" id="bt_check3" value="L03" />&nbsp;3</td>
      <td>Row 3</td>
      <td>Row 333</td>
    </tr>
  </tbody>
</table>
<br>
<button id="bt1">Get</button>

Collectives™ on Stack Overflow

How to get value and text row checked in table using Jquery?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related