使用jQuery选中特定的Tbody中的所有复选框

Question

I have a table that gets dynamically populated.

The main table will have 3 <tbody> sections in it and rows in each one.

Each row will have a checkbox in it.

What I want to do is use a jquery selector that matches the <tbody> id. The id is also dynamically created so it is not a constant value but uses a variable.

The jquery I am trying to use is this:

$(":input[id$='_ErrorCheckbox']").click(function () {
        var wbId = $(this).attr('id').split("_")[0].toString().trim();

        $('tbody#' + wbId + ' _ErrorVisits tr td input[type="checkbox"]').prop('checked', $(this).prop('checked'));
    });

I also tried using this statement to grab the rows in that <tbody> but it did not work (threw an unknown syntax error):

$('tbody[id$=' + wbId + ' _ErrorVisits] tr td input[type="checkbox"]').prop('checked', $(this).prop('checked'));

The first method above, does not throw any errors but does not select anything.

What is the correct way to use jquery selectors to grab a specific <tbody> element using its id?

Edit: Here is the html table output:

<table id="workbookTable_25116" cellpadding="10">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="25116 _SelectAllCheckbox"></th><th>Visit Timepoint</th><th>Visit Information</th><th>Notifications/Errors</th><th>Preview SQC Analysis</th>
                        </tr>
                    </thead>
                    <tbody id="25116 _ErrorVisits">
                        <tr><td></td><td></td><td></td><td></td></tr>
                        <tr><td><input type="checkbox" id="25116 _ErrorCheckbox"></td><td><b>Visits in Error</b></td><td></td><td></td></tr><tr style="background-color: red;"><td><input type="checkbox" id="9be44178-7273-4057-9607-acb135114b39 _25116 _Checkbox" name="visit_cb"></td><td>Week 8</td><td>1008-001, Week 8, 14005_MRI_Femur v1.0</td><td>This visit has a task in Error status!</td><td><input type="button" id="9be44178-7273-4057-9607-acb135114b39 _25116 _ResetTaskButton" value="Reset Task"></td></tr><tr style="background-color: red;"><td><input type="checkbox" id="367e7f6a-ec3a-476f-a1e3-b3eecf18db8b _25116 _Checkbox" name="visit_cb"></td><td>Week 16</td><td>1008-001, Week 16, 14005_MRI_Femur v1.0</td><td>This visit has a task in Error status!</td><td><input type="button" id="367e7f6a-ec3a-476f-a1e3-b3eecf18db8b _25116 _ResetTaskButton" value="Reset Task"></td></tr>
                    </tbody>
                    <tbody id="25116 _NotPreviouslySQCvisits">
                        <tr><td></td><td></td><td></td><td></td></tr>
                        <tr><td><input type="checkbox" id="25116 _NotSQCCheckbox"></td><td><b>First Time SQC Visits</b></td><td></td><td></td></tr><tr style="background-color: yellow;"><td><input type="checkbox" id="d38bc66a-561e-4a12-9d95-4979eb3e9b9b _25116 _Checkbox" name="visit_cb"></td><td>Week 4</td><td>1008-001, Week 4, 14005_MRI_Femur v1.0</td><td></td><td><input type="button" id="d38bc66a-561e-4a12-9d95-4979eb3e9b9b _25116 _PreviewButton" value="SQC Analysis Preview"></td></tr>
                    </tbody>
                    <tbody id="25116 _PreSQCvisits">
                        <tr><td></td><td></td><td></td><td></td></tr>
                        <tr><td><input type="checkbox" id="25116 _PreSQCCheckbox"></td><td><b>Previously SQC Visits</b></td><td></td><td></td></tr><tr style="background-color: greenyellow;"><td><input type="checkbox" id="25d62e5f-b69d-4f87-aaaa-09c44e06f1cb _25116 _Checkbox" name="visit_cb"></td><td>Week 12</td><td>1008-001, Week 12, 14005_MRI_Femur v1.0</td><td></td><td><input type="button" id="25d62e5f-b69d-4f87-aaaa-09c44e06f1cb _25116 _PreviewButton" value="SQC Analysis Preview"></td></tr>
                    </tbody>
                </table>

Edit: Solution found, needed quotes around id. See my answer below for code. Thanks for all the help everyone.

Answer 1

The follow line should be changed:

$('tbody[id$=' + wbId + ' _ErrorVisits] tr td input[type="checkbox"]').prop('checked', $(this).prop('checked'));

To:

$('tbody[id$=' + wbId + '_ErrorVisits] tr td input[type="checkbox"]').prop('checked', $(this).prop('checked'));

THAT IS : replace ' _ErrorVisits] with '_ErrorVisits] .

NOTE: I would not advise on the use of id's with spaces but the spaces can be escaped as follows as a quick fix :

Replace wbId with wbId.replace(/ /g, '\\\\\\\\ ')

The ideal solution is to fix the ids to remove spaces.

Answer 2

Sorry everyone, but it turns out I was missing quotes around the id selector.

Here is the final jquery code:

$("tbody[id$='" + wbId + " _ErrorVisits'] tr td input[type='checkbox']").prop('checked', $(this).prop('checked'));

Quotes needed to be placed around the id to prevent a syntax error and because the id had spaces in it.