如何标记由没有ID的循环生成的复选框？答案

【问题标题】：How to mark checkboxs generated by loop without ID?如何标记由没有ID的循环生成的复选框？
【发布时间】：2015-11-26 04:24:24
【问题描述】：

我会尽力描述我的问题，很难用语言表达。

在我的页面上，我有一个文本框和一个按钮。我在文本框中输入用户名，然后单击按钮返回所有用户信息。

在此之下，我有一个由我的数据库中用户可能在其中的每个角色的 foreach 循环生成的表，旁边有一个 2 个复选框。角色和文本框甚至在按钮被点击之前就显示出来了。

当用户信息返回时，无论用户处于哪个角色，我都需要选中这些框。

这似乎很容易，我只是很难弄清楚我将如何定位每个特定的复选框，因为它们是在循环中创建的，不允许我给它们特定的 ID。

<table border="1" id="ApplicationRoles">
            <thead>
                <tr>
                    <th style="text-align:center" width="300">Role</th>
                    <th style="text-align:center" width="300">Category 1</th>
                    <th style="text-align:center" width="300">Category 2</th>
                </tr>
            </thead>
            <tbody>

                @foreach (var role in Model.appRoles)
                {
                   <tr>
                        <td>
                            @Html.DisplayFor(modelItem => role.Name)
                        </td>
                        <td>

                            <input type="checkbox"  />

                        </td>
                        <td>
                            <input type="checkbox" />

                    </tr>
                }
            </tbody>
        </table>

使用 javascript，我可以检查用户所处的角色，但我如何定位特定的复选框来检查它（假设用户处于此角色），而不能给每个人一个 ID？

【问题讨论】：

使用document.querySelectorAll('input[type=checkbox]') 获取文档中所有复选框的列表。当然你得知道哪个复选框是哪个！
@MrLister 我如何区分哪个复选框是哪个？

标签： javascript jquery asp.net checkbox

【解决方案1】：

最简单的方法是分配一个可以更容易通过 jquery 选择的想法。因为你用的是剃须刀。看起来像这样。

foreach (var role in Model.appRoles)
{
    <input type="checkbox" id="chk_@(role.Name)" />
}

然后，当您尝试获取复选框时，您将使用这样的选择器。

$('#chk_' + roleName).prop('checked',true);

如果您需要使用严格的 jQuery 获取复选框。你可以做这样的事情......

http://jsfiddle.net/8q9cco37/

var user = {'role':'ADMIN2'};

var $roleMatch = $('td').filter(function(){
   return $(this).text().toLowerCase() == user.role.toLowerCase();
});

var chk1 = $roleMatch.next('td').find('input');
var chk2 = $roleMatch.next('td').next('td').find('input');

chk1.prop('checked',true);
chk2.prop('checked',true);

【讨论】：

这是完美的，感谢您包含 jquery 定位

【解决方案2】：

我不熟悉asp.net，所以我可能会搞砸语法，但想法是一样的。

这里我使用role.Name作为复选框的ID，你可以在JS代码中使用任何方便引用的东西。

角色第一类第 2 类

            @foreach (var role in Model.appRoles)
            {
               <tr>
                    <td>
                        @Html.DisplayFor(modelItem => role.Name)
                    </td>
                    <td>

                        <input type="checkbox" id="<%= role.Name %>1" />

                    </td>
                    <td>
                        <input type="checkbox" id="<%= role.Name %>2"/>

                </tr>
            }
        </tbody>
    </table>

【讨论】：

这使我可以根据名称和类别为每个复选框提供一个唯一的 ID，使其易于定位，完美，谢谢。你的权利，id的语法有点不对，但我能得到它。

【解决方案3】：

我会创建一个变量并将其作为 id 的一部分附加以区分它们。我假设这两个输入是每个列表的一个组？所以，我会在编号约定中区分它们（如果你明白我的意思，就像'y'和'n'）：

@{
var i = 0;
foreach (var role in Model.appRoles)
{
  i += 1;
  <tr>
    <td>
        @Html.DisplayFor(modelItem => role.Name)
    </td>
    <td>

        <input type="checkbox" ID="checkbox_Y@i"  />

    </td>
    <td>
        <input type="checkbox" ID="checkbox_N@i" />
    </td>
  </tr>
}

【讨论】：

【解决方案4】：

如果您要进行实际绑定，可以这样做。

@for(int i = 0; i < Model.appRoles.Count; i++)
{
      <tr>
          <td>
              @Html.DisplayFor(modelItem => Model.appRoles[i].Name)
          </td>
          <td>
              @Html.CheckBoxFor(x=> Model.appRoles[i].IsEnabled, new { id = Model.appRoles[i].MyId })
          </td>
      </tr>
}

然后，如果您感兴趣，只需分配特定的 ID。

但是，如果您将其包装到一个操作中，它将生成可以绑定回模型（使用 List 属性）的专有名称，同时提交您的表单而无需触及任何内容。

【讨论】：