复选框更改时在模型上设置值答案

【问题标题】：Set value on model when checkbox changes复选框更改时在模型上设置值
【发布时间】：2019-05-29 18:02:55
【问题描述】：

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

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

我的页面代码如下：

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

【问题讨论】：

元素的 ID 应该是唯一的。因此，您将获得不同的隐藏 ID。我不记得重复元素的 MVC Id 是如何组成的，但这不是问题：您应该使用 HTML 帮助器 @Html.Id(Model.EmployeeList[i].IsChanged) 获取 Id 因此，您可以绑定 Hidden以这种方式将 ID 设置为复选框属性：
@Sycraw ：我不太明白你的意思。你能澄清一下吗？
MVC 将为“isChanged”隐藏生成一个 ID，因为会有更多隐藏它应该给它们一个非固定的 id（即：IsChanged_1，IsChanged_2...） Foreach 行，以获得您可以使用 @Html.Id(Model.EmployeeList[i].IsChanged) 的特定 Hidden 的 id：它应该打印该行内隐藏的 Id。然后，您可以将其放在自定义复选框属性中以达到类似：然后您可以使用 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( "改变了！！"); }); } );获取示例代码并对其进行格式化，使其具有可读性和可理解性
@Sycraw 我一直在 "var hdnIsChangedId = t.data("changedHidden");" 上得到一个 "未定义"

标签： javascript asp.net checkbox

【解决方案1】：

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

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

【讨论】：