javascript - 动态将其值设置为 true 后，复选框未显示为选中状态

Question

我目前正在开发一个 ASP.NET MVC 项目。我有一个用于显示数据的页面，用户可以在其中使用复选框来标记不同的项目，然后对这些项目进行更改。在某些页面上，有足够多的复选框，需要“选择所有复选框”按钮。我在 javascript 中输入了代码，但无论我如何尝试，似乎都无法让它工作。这是我的 HTML:

我首先循环遍历我的 View 模型数据并显示一个复选框，其中每个复选框的 ID 为我的模型的 ID。

@foreach(var item in Model.Data)
{ 
  <input name="selected" type="checkbox" id="@item.id" value="@item.id"/>
}

页面上显示的每个复选框现在都有每个数据库 ID 的 ID。

然后我创建这个按钮

<a onclick="selectAll()" class="btn btn-primary">Select All</a>

该按钮对应于以下 JavaScript:

  <script type="text/javascript" language="javascript">
                function selectAll()
                {
                    var stepIDs = @Html.Raw(JsonConvert.SerializeObject(this.Model.Data));


                    for(let i = 0; i  < stepIDs.length; i++)
                    {
                        var curr = stepIDs[i].id;                        
                        document.getElementById(curr).checked = true;            

                    }


                }
  </script>

我使用 SerializeObject() 命令再次获取 ID，然后将每个相应的 ID 设置为 true(取决于数据库中有多少个 ID)。

在运行时，复选框的值成功更改为 true，但复选框中不显示勾号。我也尝试过使用 Jquery 来尝试选择它，但它也不起作用。

Answer 1

尝试

yourCheckBoxVariable.setAttribute("checked","checked");

或

yourCheckBoxVariable.click();

希望有帮助。你所做的有点超出了我的知识范围，但我之前处理过未勾选的复选框，并且上述两个解决方案都对我有用。