jQuery动态选择复选框组onChange

Question

我有一组动态的行，每个行都有一个下拉列表和复选框，如果选择了某个选项值，我需要在 onChange 上选中所有复选框。

这适用于一组，但是当有多行并且从一行中选择选项值时，onChange 会触发从所有行而不是该特定行中选择所有复选框。

我设置了一个小提琴来澄清我的意思 - 很确定我需要以某种方式获取行计数器并在 onChange 中传递该计数器编号，因此它不会选择所有复选框，而只有正在更改下拉列表的行是在。

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>

如果我在 eventRegistrations[1] 中硬编码 1，则第一个下拉菜单更改为“参加”时效果很好。 我认为需要一个计数器以某种方式获取每一行，循环或执行 each() 并根据选择的下拉列表传递计数器编号是 eventRegistrations[i] 基于选择哪个

$("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);
    }*/ 
}
});

感谢您的帮助！

Answer 1

您可以将更改功能绑定到所有选择。然后您可以检查使用了哪个并获取与复选框开头相同的起始字符串。就像这样：

$("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/