javascript - 当复选框更改时在模型上设置值

Question

我有一个页面，其中包含每个用户的用户名和复选框。它看起来像一个矩阵。

现在，当更改其中一个复选框时，我想更改用户的值，这样我就知道更改了哪个用户。这样我就可以检查数据库中需要更新哪些用户。

我的页面代码如下所示:

@for(var i = 0; i < Model.EmployeeList.Count; i++)
{
    <input type="hidden" asp-for="EmployeeList[i].Id"/>
    <tr>
    <th scope="row">@Model.EmployeeList[i].Name @Model.EmployeeList[i].Surname</th>
<th scope="row">@Model.EmployeeList[i].Location</th>
@for (var j = 0; j < Model.EmployeeList[i].SelectedSkillList.Count; j++)
{
<td>

    @*<div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheck1">
        <label class="custom-control-label" for="customCheck1">Check</label>
    </div>*@
        <label class="label">
            <input asp-for="EmployeeList[i].SelectedSkillList[j].IsSelected" type="checkbox" class="label__checkbox"/>
            <span class="label__text">
                <span class="label__check">
                    <i class="fa fa-check icon"></i>
                </span>
            </span>
        </label>

    @*<input asp-for="EmployeeList[i].SelectedSkillList[j].IsSelected" type="checkbox" />*@
    @*If this is not included, prefix becomes null*@
    @Html.HiddenFor(x => Model.EmployeeList[i].SelectedSkillList[j].Prefix)
    @Html.HiddenFor(x => Model.EmployeeList[i].IsChanged)
</td>
}
</tr>
}

当我单击复选框时，我想将 Model.EmployeeList[i].IsChanged 的​​值设置为 true。

Answer 1

要解决这个问题，您应该知道 Id 对于任何元素都应该是唯一的。因此，您将获得不同的隐藏 ID。我不记得重复元素的 MVC Id 是如何组成的，但这不是问题:您应该使用 HTML 帮助器 @Html.Id(Model.EmployeeList[i].IsChanged) 获取 Id，因此，您可以绑定(bind) Hidden以这种方式将 ID 设置为复选框属性:

<input asp-for=" .. ... " data-changedHidden="@Html.Id(Model.EmployeeList[i].IsChanged)"

然后，您可以在Javascript中绑定(bind)onchange事件，检查更改的复选框的绑定(bind)“data-changedHidden”，通过id获取元素并刷新他的val。例如，对于每一行，您将得到如下内容:

<input type="checkbox" data-changedHidden="IsChanged-3" class="label__checkbox"... />

然后你可以使用javascript订阅onchanged复选框事件，获取他的data-changedhidden属性，因为它是在行中呈现的隐藏的id，所以你可以使用它来到达特定的隐藏并更新他的值。为了简单起见，我们举一个 jQuery 的例子:

$( function(){ 
    $(".label__checkbox").on("change",
        function(){ 
            var t=$(this); 
            var hdnIsChangedId=t.data("changedHidden"); 
            var hidden=$("#"+hdnIsChangedId); 
            hidden.val("changed!!"); 
        }); 
    } );
  );