javascript - jQuery动态选择复选框组onChange

Question

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

这对于一组来说效果很好，但是当有多行并且从一行中选择选项值时，onChange 会触发选择所有行中的所有复选框，而不是特定行。

我设置了一个 fiddle 来澄清我的意思 - 非常确定我需要以某种方式获取行计数器并在 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

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

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