CODEWITHSUNDEEP
javascript
a_l_e_x
a_l_e_x

Reputation: 400

The checkbox check if it is checked does not work

I have a problem seeing if the checkbox has been checked.

In particular, I have a table with id, name and country and an additional column with a checkbox. The purpose is to return all the ids of the checkbox that has been selected. But what I notice is that the if statement doesn't seem to work.

Can you kindly help me?

function GetSelected() {
  var table = document.getElementById(mytable);
  var rowCount = table.rows.length;
  console.log(rowCount)
  for (var i = 1; i < rowCount; i++) {
    var row = table.rows[i];
    var chkbox = table.getElementsByTagName("INPUT");
    if (chkbox[i].checked) {
      var row = checkBoxes[i].parentNode.parentNode;
      id_art += row.cells[0].innerHTML;
      console.log(id_art);
    }
  }
}
<table cellspacing="0" rules="all" border="1" id="my-table" style="border-collapse: collapse;">
  <tr>
    <th>&nbsp;</th>
    <th style="width:80px">Check</th>
    <th style="width:80px">Id</th>
    <th style="width:120px">Name</th>
    <th style="width:120px">Country</th>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>1</td>
    <td>John Hammond</td>
    <td>United States</td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>2</td>
    <td>Mudassar Khan</td>
    <td>India</td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>3</td>
    <td>Suzanne Mathews</td>
    <td>France</td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>4</td>
    <td>Robert Schidner</td>
    <td>Russia</td>
  </tr>
</table>
<br />
<input type="button" value="Get Id Selected" onclick="GetSelected()" />

Upvotes: 0

Views: 513

Answers (2)

dale landry
dale landry

Reputation: 8600

You can query over the checked checkbox elements using forEach() or a for() loop and then go to the closest tr up the dom tree using closest('tr') and get the textContent of the child using the key that is set for your tr ID section => '2', since that is the third td element in your tr.

NOTES: In your example you did not define the variable mytable you are passing into your function.

Rather than using two parentNodes to get up two level, use .closest()

Within the loop, using the keys to get the proper children:

  • Check td section of your table would be .children[1]
  • Id td section of your table would be .children[2]
  • Name td section of your table would be .children[3]

If this is not what you are looking for let me know and I can update or remove this answer.

function GetSelected() {
  let checks = document.querySelectorAll('#my-table td input[type="checkbox"]:checked');
  checks.forEach(cb => console.log(cb.closest('tr').children[2].textContent))
}
<table cellspacing="0" rules="all" border="1" id="my-table" style="border-collapse: collapse;">
  <tr>
    <th>&nbsp;</th>
    <th style="width:80px">Check</th>
    <th style="width:80px">Id</th>
    <th style="width:120px">Name</th>
    <th style="width:120px">Country</th>
  </tr>
  <tr data-id="1">
    <td><input type="checkbox" /></td>
    <td>1</td>
    <td>John Hammond</td>
    <td>United States</td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>2</td>
    <td>Mudassar Khan</td>
    <td>India</td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>3</td>
    <td>Suzanne Mathews</td>
    <td>France</td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>4</td>
    <td>Robert Schidner</td>
    <td>Russia</td>
  </tr>
</table>
<br />
<input type="button" value="Get Selected" onclick="GetSelected()" />

Upvotes: 0

epascarello
epascarello

Reputation: 207501

You can grab all the checked checkboxes and loop over them to get the text in the next td element.

function getSelected() {
  var cbs = document.querySelectorAll('#my-table input[type="checkbox"]:checked');
  console.log(cbs.length);
  const ids = Array.from(cbs).map(cb => cb.closest('td').nextElementSibling.textContent);
  console.log(ids);
}
<table cellspacing="0" rules="all" border="1" id="my-table" style="border-collapse: collapse;">
  <tr>
    <th>&nbsp;</th>
    <th style="width:80px">Check</th>
    <th style="width:80px">Id</th>
    <th style="width:120px">Name</th>
    <th style="width:120px">Country</th>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>1</td>
    <td>John Hammond</td>
    <td>United States</td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>2</td>
    <td>Mudassar Khan</td>
    <td>India</td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>3</td>
    <td>Suzanne Mathews</td>
    <td>France</td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>4</td>
    <td>Robert Schidner</td>
    <td>Russia</td>
  </tr>
</table>
<br />
<input type="button" value="Get Id Selected" onclick="getSelected()" />

Upvotes: 1

Related Questions