jQuery动态选择复选框组onChange

jQuery dynamically select checkbox group onChange

本文关键字：onChange 复选框 选择 动态 jQuery      更新时间：2023-09-26

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

这对一个组来说很好，但当有多行并且从一行中选择了选项值时，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>

如果我在事件注册[1]中硬编码1，则第一个下拉列表更改为"已出席"时效果良好。我认为需要一个计数器以某种方式获取每一行，循环或执行each（）并传入基于哪个下拉列表的couner编号是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);
    }*/ 
}
});

谢谢你的帮助！

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

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

相关文章：