CODEWITHSUNDEEP
javascriptjqueryhtml
Jibes
Jibes

Reputation: 953

jQuery dynamically select checkbox group onChange

I have a dynamic set of rows with a dropdown and checkboxes in each and need to select all checkboxes onChange if a certain option value is selected.

This works fine for one group but when there's multiple rows and the option value is selected from one row, the onChange is triggering to select all checkboxes from all rows instead of that specific row.

I setup a fiddle to clarify what I mean - pretty sure i need to somehow get a counter of rows and pass in that counter number in the onChange so it doesn't select all checkboxes and only the row the dropdown being changed is in.

http://jsfiddle.net/7brzct64/

<table>
<tr>
    <td>
        <!--First row eventRegistrations[1]-->
        <select name="eventRegistrations[1].eventRegistrationStatusTypeID" id="registrationStatusSelect">
            <option value="1">Pending</option>
            <option value="2">Attended</option>
        </select>
    </td>
    <td>
        <input type="checkbox" name="eventRegistrations[1].markAttendance[1].attendanceDate" value="1">9/21/14
        <input type="checkbox" name="eventRegistrations[1].markAttendance[2].attendanceDate" value="2">9/22/14</td>
</tr>
<!--There could be multiple dynamic rows whose input names increment like eventRegistrations[i]-->
<tr>
    <td>
        <!--Next dynamic row eventRegistrations[2]-->
        <select name="eventRegistrations[2].eventRegistrationStatusTypeID" id="registrationStatusSelect">
            <option value="1">Pending</option>
            <option value="2">Attended</option>
        </select>
    </td>
    <td>
        <input type="checkbox" name="eventRegistrations[2].markAttendance[1].attendanceDate" value="1">10/23/14
        <input type="checkbox" name="eventRegistrations[2].markAttendance[2].attendanceDate" value="2">10/24/14</td>
</tr>

Works fine for first dropdown changed to "Attended" if I hardcode 1 in eventRegistrations[1]. I think need a counter to get each row somehow, loop or do an each() and pass in the couner number based on which dropdown is selected be eventRegistrations[i] based on which is selected

$("select[name^='eventRegistrations[1]']").change(function () {
if ($(this).val() === '2') {
    $("input[name^='eventRegistrations[1]']").prop('checked', true);

    /*
    var regCount = $(":input[name^='eventRegistrations[i]']").length
    for (i = 1; i <= regCount; i++) {
        $("input[name^='eventRegistrations[i]']").prop('checked', true);
    }*/ 
}
});

Thanks for the help!

Upvotes: 0

Views: 1050

Answers (1)

k-nut
k-nut

Reputation: 3595

You can bind the change function to all selects. Then you can check which one was used and get the starting string which is identical with the start of the check boxes. Just like this:

$("select").change(function () {
    if ($(this).val() === '2') {
        var start = $(this).attr("name").split(".")[0];
        $("input[name^='" + start + ".markAttendance']").prop('checked', true);
    }
});

http://jsfiddle.net/7brzct64/2/

Upvotes: 1

Related Questions