JQuery/Javascript Accessing a table with checkbox and retrieve the id of one specific <td>

usera8Ir 0
Viewed 38

Trying to :

  1. Verify if a checkbox got selected. 2.Retrieve the value.
  2. Save a value in an array. So my array would have the following values: [1,21,111]

What him I missing, any guidance would be appreciated. After I've figured this out... will go and create another array to store the automationName.

var SelectedItems = [];
$('.btn1').on('click', function() {
  SelectedItems.length = 0;
  $('#flowtable tbody tr').each(function() {

    //    if ($(this).is(':checked')) {
    //    if ($('.scheduleMe').is(':checked')) {        
    if ($('td .scheduleMe').is(':checked')) {
      SelectedItems.push($(this).attr("id"));
    }
  });

  console.log('Checked #' + SelectedItems.length);
  console.log("list 2= " + SelectedItems);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <h1>jQuery Crash Course</h1>
</header>
<div id="container">
  <form id="form">
    <table id="flowtable">
      <tbody>
        <tr class="selected">
          <td id="1"></td>
          <td class="automationName"> automation 1</td>
          <td><input type="checkbox" class="scheduleMe" name="vehicle1"></td>
        </tr>
        <tr>
          <td id="21"></td>
          <td class="automationName">automation 21</td>
          <td><input type="checkbox" class="scheduleMe" name="vehicle21"></td>
        </tr>
        <tr>
          <td id="111"></td>
          <td class="automationName">automation 111</td>
          <td><input type="checkbox" class="scheduleMe" name="vehicle111"></td>
        </tr>

      </tbody>
    </table>
    <button type="button" class="btn1">check list box</button>
  </form>
</div>

jquery arrays javascript
2 Answers

Firstly, give the checkboxes a value which is the id they relate to, not the the sibling/parent td.

From there you can simplify your logic by using map() to build an array of the selected values only once, when the button is clicked, not having to maintain additions/deletions from the higher scoped array when a change is made.

Below is a working example. Note the use of label elements to make the clickable area of the checkboxes bigger.

$('.btn1').on('click', function() {
  let selectedItems = $('.scheduleMe:checked').map((i, el) => el.value).get();
  console.log(selectedItems);

  // work with the array as required here, eg. pass to a fnuction for processing...
});
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<header>
  <h1>jQuery Crash Course</h1>
</header>
<div id="container">
  <form id="form">
    <table id="flowtable">
      <tbody>
        <tr class="selected">
          <td id="1"></td>
          <td class="automationName"><label for="vehicle1">automation 1</label></td>
          <td><input type="checkbox" value="1" class="scheduleMe" name="vehicle1" id="vehicle1" /></td>
        </tr>
        <tr>
          <td id="21"></td>
          <td class="automationName"><label for="vehicle21">automation 21</label></td>
          <td><input type="checkbox" value="21" class="scheduleMe" name="vehicle21" id="vehicle21" /></td>
        </tr>
        <tr>
          <td id="111"></td>
          <td class="automationName"><label for="vehicle111">automation 111</label></td>
          <td><input type="checkbox" value="111" class="scheduleMe" name="vehicle111" id="vehicle111" /></td>
        </tr>
      </tbody>
    </table>
    <button type="button" class="btn1">check list box</button>
  </form>
</div>

If, for whatever reason, you can't change the HTML, then you can read the value from the td in map() like this:

let selectedItems = $('.scheduleMe:checked').map((i, el) => $(el).closest('tr').find('td[id]').prop('id')).get();
Rory McCrossan0
  • callMe() is a function that is handling all logic.
  • I am just checking if the checkBox is checked or not by using default property of input type checkbox checked.
  • If it is checked then we are pushing it in array, just making sure the item is not already there by using includes(). method.

var SelectedItems = [];
const tableRows = document.querySelectorAll("#flowtable tr");
const checkBoxes = document.querySelectorAll("#flowtable tr td > input");
const btn = document.querySelectorAll("#btn1");

function callMe() {
  checkBoxes.forEach(checkBox => {
    if (checkBox.checked) {
      const currentParent = checkBox.parentElement.parentElement;
      const getId = currentParent.querySelectorAll("td[id]")[0];
      const val = getId.id;
      if (SelectedItems.includes(val)) return;
      SelectedItems.push(val);
    }
  })
  if (SelectedItems === undefined || SelectedItems.length == 0) {
    // array does not exist or is empty
    console.log("No checkbox is checked.");
  } else {
    console.log(SelectedItems);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <h1>jQuery Crash Course</h1>
</header>
<div id="container">
  <form id="form">
    <table id="flowtable">
      <tbody>
        <tr class="selected">
          <td id="1"></td>
          <td class="automationName"> automation 1</td>
          <td><input type="checkbox" class="scheduleMe" name="vehicle1"></td>
        </tr>
        <tr>
          <td id="21"></td>
          <td class="automationName">automation 21</td>
          <td><input type="checkbox" class="scheduleMe" name="vehicle21"></td>
        </tr>
        <tr>
          <td id="111"></td>
          <td class="automationName">automation 111</td>
          <td><input type="checkbox" class="scheduleMe" name="vehicle111"></td>
        </tr>

      </tbody>
    </table>
    <button type="button" id="btn1" onclick="callMe();">check list box</button>
  </form>
</div>

Nikkkshit0
Related