jQuery dynamically select checkbox group onChange

Question

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!

do you need to keep the names like this? Square brackets in the names are quite uncommon — k-nut
– k-nut, Commented Oct 29, 2014 at 18:04
@k-nut Yes I need to keep the names in the markup the way they are setup like this if possible! Thank you!! — Jibes
– Jibes, Commented Oct 29, 2014 at 18:05

k-nut · Accepted Answer · 2014-10-29 18:22:03Z

1

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/

answered Oct 29, 2014 at 18:22

k-nut

3,6152 gold badges22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jibes Over a year ago

This works perfect! @k-nut How could I do the reverse If all dates are selected, change the dropdown value to "Attended"?

k-nut Over a year ago

you would bind a change watch on the inputs and then loop over all selects starting with the same string (similar to the other way around) then get the corresponding dropdown (also by name) and change its value

k-nut Over a year ago

@Jibes: can you mark the anwer as correct if it fits your needs?

Jibes Over a year ago

Thank you very much again for the help! I updated your fiddle above and can get dropdown to change when all selects are checked but am missing something to keep it exclusive to each row - if you have a minute to take a look that would be awesome! jsfiddle.net/7brzct64/5

Collectives™ on Stack Overflow

jQuery dynamically select checkbox group onChange

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related