CODEWITHSUNDEEP
jqueryhtml
penta
penta

Reputation: 2596

Get all values from td of a row if checkbox is checked

I have a table.

<table id="tab1">
   <thead>
      <tr>
         <th>Select</th>
         <th>Name of the item</th>
         <th>Qty</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td><input type="checkbox" class="checkBoxClass" name="record"></td>
         <td id="name"></td>
         <td id="qty"></td>
      </tr>
      <tr>
         <td><input type="checkbox" class="checkBoxClass" name="record"></td>
         <td id="name"></td>
         <td id="qty"></td>
      </tr>
      <tr>
         <td><input type="checkbox" class="checkBoxClass" name="record"></td>
         <td id="name"></td>
         <td id="qty"></td>
      </tr>
      <tr>
         <td><input type="checkbox" class="checkBoxClass" name="record"></td>
         <td id="name"></td>
         <td id="qty"></td>
      </tr>
   </tbody>
</table>

I want to get all the items in json format from the rows of the table where the checkbox is checked.

What i have tried :-

$(".submit-row").click(function () {
  alert("items submitted");
  var s = $('#tab1 tr').filter(':has(:checkbox:checked)').find('td')
  //console.log(s)

  var jsonObj = [];
  $("#tab1 tr").slice(1).each(function (index, element) {

    item = {}

    item["name"] = $(this).find('td#name').text();
    item["number"] = $(this).find('td#qty').text();

    jsonObj.push(item);

  });
  console.log(jsonObj)

});

I tried using checked property too, but no luck.

$("table > tbody > tr").each(function () {
  if ($(".checkBoxClass").is(":checked")) {
    console.log($(this).find('td').eq(1).text() + " " + $(this).find('td').eq(2).text());
  }
});

All the elements get selected in both the solutions.

Upvotes: 0

Views: 5180

Answers (2)

freefaller
freefaller

Reputation: 19963

In your jQuery code, you're finding ALL elements on the page which have the class checkBoxClass and checking is ANY of them are checked...

if ($(".checkBoxClass").is(":checked")) {

Instead you want to get the one based on the current element within the .each...

$("table > tbody > tr").each(function () {
  if ($(this).find(".checkBoxClass").is(":checked")) {
    console.log($(this).find('td').eq(1).text() + " " + $(this).find('td').eq(2).text());
  }
});

You can also make it a little bit more efficient by not repeating $(this)...

$("table > tbody > tr").each(function () {
  var $tr = $(this);
  if ($tr.find(".checkBoxClass").is(":checked")) {
    var $td = $tr.find("td");
    console.log($td.eq(1).text() + " " + $td.eq(2).text());
  }
});

So you're aware, your HTML is also invalid, as you can't have multiple elements with the same id... which you have with <td id="name"> and <td id="qty">. You're better off using classes...

$(function(){
  $(".checkBoxClass").on("click", function() {
    var data = [];
    $("table > tbody > tr").each(function () {
      var $tr = $(this);
      if ($tr.find(".checkBoxClass").is(":checked")) {
        data.push({
          name: $tr.find(".name").text(),
          number: Number($tr.find(".qty").text())
        });
      }
    });
    console.clear();
    console.log(JSON.stringify(data));
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tab1">
   <thead>
      <tr>
         <th>Select</th>
         <th>Name of the item</th>
         <th>Qty</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td><input type="checkbox" class="checkBoxClass" name="record"></td>
         <td class="name">One</td>
         <td class="qty">1</td>
      </tr>
      <tr>
         <td><input type="checkbox" class="checkBoxClass" name="record"></td>
         <td class="name">Two</td>
         <td class="qty">2</td>
      </tr>
      <tr>
         <td><input type="checkbox" class="checkBoxClass" name="record"></td>
         <td class="name">Three</td>
         <td class="qty">3</td>
      </tr>
      <tr>
         <td><input type="checkbox" class="checkBoxClass" name="record"></td>
         <td class="name">Four</td>
         <td class="qty">4</td>
      </tr>
   </tbody>
</table>

Upvotes: 3

Aditya Bhave
Aditya Bhave

Reputation: 1028

You can try using following snippet.

HTML

<table id="tab1">
  <thead>
    <tr>
      <th>Select</th>
      <th>Name of the item</th>
      <th>Qty</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td><input type="checkbox" class="checkBoxClass" name="record"></td>
      <td id="name">A</td>
      <td id="qty">B</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass" name="record"></td>
      <td id="name">C</td>
      <td id="qty">D</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass" name="record"></td>
      <td id="name">E</td>
      <td id="qty">F</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass" name="record"></td>
      <td id="name">G</td>
      <td id="qty">H</td>
    </tr>
  </tbody>
</table><table id="tab1">
  <thead>
    <tr>
      <th>Select</th>
      <th>Name of the item</th>
      <th>Qty</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td><input type="checkbox" class="checkBoxClass" name="record"></td>
      <td id="name">I</td>
      <td id="qty">J</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass" name="record"></td>
      <td id="name">K</td>
      <td id="qty">L</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass" name="record"></td>
      <td id="name">M</td>
      <td id="qty">N</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass" name="record"></td>
      <td id="name">O</td>
      <td id="qty">P</td>
    </tr>
  </tbody>
</table>

<button class="submit-row">Submit</submit>

JS

$(".submit-row").click(function(){
  let chkboxes = $('.checkBoxClass');

  for(let i = 0; i < chkboxes.length; i++) {
    if (chkboxes[i].checked) {
      let parentTr = chkboxes[i].parentNode.parentNode; 

      let name = $(parentTr)[0].children[1].innerHTML;
      let qty = $(parentTr)[0].children[2].innerHTML;

      let obj = {
        'chk': true,
        name,
        qty
      }

      console.log(obj);
    }
  }
});

Here is the codepen - https://codepen.io/aditya-bhave/pen/orVGWm

Upvotes: 2

Related Questions