jquery 如何选择同一列中的所有复选框，Asp.net core 5 mvc

zengzsys 于 2023-06-22 发布在 jQuery

关注(0)|答案(2)|浏览(133)

我正在开发Asp.net core 5 mvc应用程序，我有一个for循环来创建卡片，在每张卡片中，有一个复选框，每行有4张卡片，这意味着我们有4列。我想在每列上方添加一个复选框，以选中同一列上的所有复选框，考虑到所有卡片都是在for循环中自动创建的。
这是我的代码：

<form asp-action="ManagePermissions" method="post">
                <input type="hidden" asp-for="RoleId" />
                <div class="col-lg-12">
                    <div class="row">

                        <div class="col-lg-12">
                            <div class="row">
                                @for (int i = 0; i < Model.RoleCalims.Count; i++)
                                {
                                    <div class="col-lg-3">
                                        <div class="card card-body">
                                            <div class="media">
                                                <div class="form-check form-check-inline">
                                                    <label class="form-check-label">
                                                        <input type="hidden" asp-for="@Model.RoleCalims[i].DisplayValue" />
                                                        <input type="checkbox" class="checkBoxClass form-check-input-styled" asp-for="@Model.RoleCalims[i].IsSelected">
                                                        @Model.RoleCalims[i].DisplayValue.Split('.')[2]
                                                        <br />
                                                        <br />
                                                        @Model.RoleCalims[i].DisplayValue.Split('.')[1]
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                }
                            </div>
                        </div>

                    </div>
                </div>

                <ul class="fab-menu fab-menu-fixed fab-menu-bottom-left" data-fab-toggle="click">
                    <li>
                        <a asp-action="Roles" class="fab-menu-btn btn btn-light btn-float rounded-round btn-icon">
                            <i class="fab-icon-open icon-arrow-right13"></i>
                            <i class="fab-icon-close icon-arrow-right13"></i>
                        </a>
                        <button type="submit" class="fab-menu-btn btn bg-blue-400 btn-float rounded-round btn-icon">
                            <i class="fab-icon-open icon-pencil4"></i>
                            <i class="fab-icon-close icon-pencil4"></i>
                        </button>
                    </li>
                </ul>

            </form>

jquery

来源：https://stackoverflow.com/questions/76449450/how-to-select-all-checkboxes-at-the-same-column-asp-net-core-5-mvc

2条答案

按热度按时间

7uzetpgm1#

使用parent和find，一个使用jQuery的liner。

$('.checkNext4').on('change', function() {
$(this).parent('.row').find('.checkBoxClass:checkbox').prop('checked', $(this).is(":checked"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<form asp-action="ManagePermissions" method="post">
  <input type="hidden" asp-for="RoleId" />
  <div class="col-lg-12">
    <div class="row">

      <div class="col-lg-12">
        <div class="row">
          <!-- -->
          <input type="checkbox" class="checkBoxClass checkNext4" />
          <div class="col-lg-3">
            <div class="card card-body">
              <div class="media">
                <div class="form-check form-check-inline">
                  <label class="form-check-label">
                    <input type="hidden" asp-for="@Model.RoleCalims[i].DisplayValue" />
                    <input type="checkbox" class="checkBoxClass form-check-input-styled" asp-for="@Model.RoleCalims[i].IsSelected">Display value 1a<br /><br />Display value 1b
                    </label>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3">
            <div class="card card-body">
              <div class="media">
                <div class="form-check form-check-inline">
                  <label class="form-check-label">
                    <input type="hidden" asp-for="@Model.RoleCalims[i].DisplayValue" />
                    <input type="checkbox" class="checkBoxClass form-check-input-styled" asp-for="@Model.RoleCalims[i].IsSelected">Display value 2a<br /><br />Display value 2b
                    </label>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3">
            <div class="card card-body">
              <div class="media">
                <div class="form-check form-check-inline">
                  <label class="form-check-label">
                    <input type="hidden" asp-for="@Model.RoleCalims[i].DisplayValue" />
                    <input type="checkbox" class="checkBoxClass form-check-input-styled" asp-for="@Model.RoleCalims[i].IsSelected">Display value 3a<br /><br />Display value 3b
                    </label>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3">
            <div class="card card-body">
              <div class="media">
                <div class="form-check form-check-inline">
                  <label class="form-check-label">
                    <input type="hidden" asp-for="@Model.RoleCalims[i].DisplayValue" />
                    <input type="checkbox" class="checkBoxClass form-check-input-styled" asp-for="@Model.RoleCalims[i].IsSelected">Display value 4a<br /><br />Display value 4b
                    </label>
                </div>
              </div>
            </div>
          </div>
          <!-- -->
        </div>
      </div>
    </div>
  </div>

  <ul class="fab-menu fab-menu-fixed fab-menu-bottom-left" data-fab-toggle="click">
    <li>
      <a asp-action="Roles" class="fab-menu-btn btn btn-light btn-float rounded-round btn-icon">
        <i class="fab-icon-open icon-arrow-right13"></i>
        <i class="fab-icon-close icon-arrow-right13"></i>
      </a>
      <button type="submit" class="fab-menu-btn btn bg-blue-400 btn-float rounded-round btn-icon">
                            <i class="fab-icon-open icon-pencil4"></i>
                            <i class="fab-icon-close icon-pencil4"></i>
                        </button>
    </li>
  </ul>

</form>

注意：将jQuery change事件放在document.ready中。

赞(0）回复(0）举报 2023-06-22

sg2wtvxw2#

如果我有呈现的HTML，就更容易确定我的代码
您可以委派：

document.querySelector("form").addEventListener("click", (e) => {
  const tgt = e.target;
  if (!tgt.matches(".checkNext4")) return;
  const checked = tgt.checked;
  tgt.closest(".row").querySelectorAll(".checkBoxClass").forEach(chk => chk.checked = checked);
});

<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<form asp-action="ManagePermissions" method="post">
  <input type="hidden" asp-for="RoleId" />
  <div class="col-lg-12">
    <div class="row">

      <div class="col-lg-12">
        <div class="row">
          <!-- -->
          <input type="checkbox" class="checkBoxClass checkNext4" />
          <div class="col-lg-3">
            <div class="card card-body">
              <div class="media">
                <div class="form-check form-check-inline">
                  <label class="form-check-label">
                    <input type="hidden" asp-for="@Model.RoleCalims[i].DisplayValue" />
                    <input type="checkbox" class="checkBoxClass form-check-input-styled" asp-for="@Model.RoleCalims[i].IsSelected">Display value 1a<br /><br />Display value 1b
                    </label>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3">
            <div class="card card-body">
              <div class="media">
                <div class="form-check form-check-inline">
                  <label class="form-check-label">
                    <input type="hidden" asp-for="@Model.RoleCalims[i].DisplayValue" />
                    <input type="checkbox" class="checkBoxClass form-check-input-styled" asp-for="@Model.RoleCalims[i].IsSelected">Display value 2a<br /><br />Display value 2b
                    </label>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3">
            <div class="card card-body">
              <div class="media">
                <div class="form-check form-check-inline">
                  <label class="form-check-label">
                    <input type="hidden" asp-for="@Model.RoleCalims[i].DisplayValue" />
                    <input type="checkbox" class="checkBoxClass form-check-input-styled" asp-for="@Model.RoleCalims[i].IsSelected">Display value 3a<br /><br />Display value 3b
                    </label>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3">
            <div class="card card-body">
              <div class="media">
                <div class="form-check form-check-inline">
                  <label class="form-check-label">
                    <input type="hidden" asp-for="@Model.RoleCalims[i].DisplayValue" />
                    <input type="checkbox" class="checkBoxClass form-check-input-styled" asp-for="@Model.RoleCalims[i].IsSelected">Display value 4a<br /><br />Display value 4b
                    </label>
                </div>
              </div>
            </div>
          </div>
          <!-- -->
        </div>
      </div>
    </div>
  </div>

  <ul class="fab-menu fab-menu-fixed fab-menu-bottom-left" data-fab-toggle="click">
    <li>
      <a asp-action="Roles" class="fab-menu-btn btn btn-light btn-float rounded-round btn-icon">
        <i class="fab-icon-open icon-arrow-right13"></i>
        <i class="fab-icon-close icon-arrow-right13"></i>
      </a>
      <button type="submit" class="fab-menu-btn btn bg-blue-400 btn-float rounded-round btn-icon">
                            <i class="fab-icon-open icon-pencil4"></i>
                            <i class="fab-icon-close icon-pencil4"></i>
                        </button>
    </li>
  </ul>

</form>

赞(0）回复(0）举报 2023-06-22

我来回答

jquery 如何选择同一列中的所有复选框，Asp.net core 5 mvc

2条答案

相关问题

热门标签

最新问答