如何使用输入类型复选框选择所有框答案

【问题标题】：How to select all boxes using input type checkbox如何使用输入类型复选框选择所有框
【发布时间】：2020-10-28 20:09:15
【问题描述】：

<table class="table table-striped grid-table">
    <tr>
        <th>Id</th>
        <th>Code</th>
        <th>
        <input type="checkbox" id="box"/>
        </th>
    </tr>
    @foreach (var item in (IEnumerable<cit.Models.getPersonPerName_Result>)Model)
    {
        <tr>
            <td>@item.idper</td>
            <td>@item.pername</td>
            <td>      

             <div class="pure-checkbox">
               <input type="checkbox" id="@item.idper" class="chk" checked="@(item.idperson == ViewBag.idperson ? true : false)" name="@item.id.ToString()" id="@item.id.ToString()" />
               <label for="@item.id.ToString()"></label>
             </div>

            </td>
        </tr>
    }

我已经定义了类pure-checkbox，所以item.idper 是我的列，其中包含我的文档的值，item.pername 是我的列，其中包含我的文档的代码，还有我为@987654327 定义的pure-checkbox 列@ 我只能一一检查，但我想使用上面代码中的输入类型来检查它们。

【问题讨论】：

标签： javascript c# model-view-controller

【解决方案1】：

实现这一点的方法是监听“主”复选框状态的变化。您可以通过附加事件处理程序来做到这一点。触发此处理程序时，您必须将所有其他复选框的选中状态设置为“主”复选框的选中状态：

var selectAllBox = document.getElementById('box');
selectAllBox.addEventListener('click', function() {
    var pureCheckboxes = document.getElementsByClassName('chk');
  
  for(var i = 0; i < pureCheckboxes.length; i++) {
    pureCheckboxes[i].checked = this.checked;
  }
});

一个有效的 JSFiddle：https://jsfiddle.net/TDucheyne/raxdzw1f/

【讨论】：

好的，但是当我重新加载页面时，复选框未保存，是否有任何解决方案可以使用 AJAX 或其他方式解决 myb 问题。

【解决方案2】：

你可以用一行来做

$(document).ready(function(){
  $("#box").change(function(){  
    $(".chk").prop('checked',$(this).prop('checked'));
  });
});

JSFiddle

【讨论】：