时间戳

首页 > 解决方案 > 复选框更改时在模型上设置值

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

问题描述

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

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

我的页面代码如下所示：

@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。

标签： javascriptasp.netcheckbox

解决方案

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

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

然后，您可以在Javascript中绑定onchange事件，选中已更改复选框的绑定“data-changedHidden”，通过id获取元素并刷新他的val。例如， foreach 行你会得到类似的东西：

<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!!"); 
        }); 
    } );
  );

推荐阅读