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

Question

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 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>

    <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>

Answer 1

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();

Answer 2

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>

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

Question

2 answers

solution1
1 2022-09-12 18:11:22

solution2
0 2022-09-12 18:42:08

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

Question

2 answers

solution1 1 2022-09-12 18:11:22

solution2 0 2022-09-12 18:42:08

solution1
1 2022-09-12 18:11:22

solution2
0 2022-09-12 18:42:08