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

Trying to :

Verify if a checkbox got selected. 2.Retrieve the value.
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.

<!DOCTYPE html>
<html>

<head>
    <title>jQuery Crash Course | Selectors</title>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <style>
    </style>
</head>

<body>
    <header>
        <h1>jQuery Crash Course</h1>
    </header>
    <div id="container">
        <form id="form">
            <table id="flowtable">
                <tbody>
                    <tr >
                        <td id="1"></td>
                        <td > automation 1</td>
                        <td><input type="checkbox"  name="vehicle1"></td>
                    </tr>
                    <tr>
                        <td id="21"></td>
                        <td >automation 21</td>
                        <td><input type="checkbox"  name="vehicle21"></td>
                    </tr>
                    <tr>
                        <td id="111"></td>
                        <td >automation 111</td>
                        <td><input type="checkbox"  name="vehicle111"></td>
                    </tr>

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

    <script>
        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>
</body>

</html>

CodePudding user response：

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 >
          <td id="1"></td>
          <td ><label for="vehicle1">automation 1</label></td>
          <td><input type="checkbox" value="1"  name="vehicle1" id="vehicle1" /></td>
        </tr>
        <tr>
          <td id="21"></td>
          <td ><label for="vehicle21">automation 21</label></td>
          <td><input type="checkbox" value="21"  name="vehicle21" id="vehicle21" /></td>
        </tr>
        <tr>
          <td id="111"></td>
          <td ><label for="vehicle111">automation 111</label></td>
          <td><input type="checkbox" value="111"  name="vehicle111" id="vehicle111" /></td>
        </tr>
      </tbody>
    </table>
    <button type="button" >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();

CodePudding user response：

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 >
          <td id="1"></td>
          <td > automation 1</td>
          <td><input type="checkbox"  name="vehicle1"></td>
        </tr>
        <tr>
          <td id="21"></td>
          <td >automation 21</td>
          <td><input type="checkbox"  name="vehicle21"></td>
        </tr>
        <tr>
          <td id="111"></td>
          <td >automation 111</td>
          <td><input type="checkbox"  name="vehicle111"></td>
        </tr>

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