Question

 @using (Html.BeginForm("Delete", "Employee", FormMethod.Post))  
                {  
                    <button type="submit" value="Delete" class="btn btn-sm btn-danger rounded-0" onclick="return confirm('Are you sure?')"><i class="fa fa-trash-o"></i> Delete</button>  
                    <br /> <br />
                    <table id="DataTable" border="1">     
                                 <tr>
                                    <th><input type="checkbox" id="checkBoxAll"  /></th>
                                    <th>EmployeeName</th>
                                    <th>Designation</th>
                                    <th>Department</th>
                                    <th>Gender</th>
                                </tr>

@for (int i = 0; i < Model.Rows.Count; i++)
{
    <tr>
    <td><input type="checkbox" name="ID" value="@Model.Rows[i][0]" class="chkCheckBoxId" /></td>
    <td>@Model.Rows[i][1]</td>
    <td>@Model.Rows[i][2]</td>
    <td>@Model.Rows[i][3]</td>
    <td>@Model.Rows[i][4]</td>
    <td>
       <a href="@Url.Action('Edit', 'Employee', new { @id = Model.Rows[i][0] })">Edit</a>
       <a href="@Url.Action('Delete', 'Employee', new { @id = Model.Rows[i][0] })">Delete</a>
    </td>
    </tr>

}
</table><br />
<a href="@Url.Action('Create','Employee')">Add Employee</a>
 }

Answer 1

使用以下代码片段使其正常工作。

$(document).ready(function() {
  $("#ckbCheckAll").click(function() {
    $(".checkbox input").prop('checked', $(this).prop('checked'));
  });
});

function selectCheckbox(event) {
  $('#ckbCheckAll').prop('checked', false);
  $(event.target).prop('checked', $(this).prop('checked'));
}

.abc {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<table class="table table-striped" style="padding:20px;">
  <thead>
    <tr>
      <th>
        <div class="checkbox">
          <label>
            <input type="checkbox" id="ckbCheckAll"> 
          </label>
        </div>
      </th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td scope="row">
        <div class="checkbox">
          <label>
            <input type="checkbox" onclick="selectCheckbox(event)"> 
          </label>
        </div>
      </td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td scope="row">
        <div class="checkbox">
          <label>
            <input type="checkbox" onclick="selectCheckbox(event)"> 
          </label>
        </div>
      </td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td scope="row">
        <div class="checkbox">
          <label>
            <input type="checkbox" onclick="selectCheckbox(event)"> 
          </label>
        </div>
      </td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Answer 2

  $(function () {
    $('#checkBoxAll').click(function () {
        if ($(this).is(":checked")) {
            $("input[name='chkCheckBoxId']").prop("checked", true)
        }
        else {
            $("input[name='chkCheckBoxId']").prop("checked", false)
        }
    });

    $("input[name='chkCheckBoxId']").click(function () {
        if ($("input[name='chkCheckBoxId']").length == $("input[name='chkCheckBoxId']:checked").length) {
            $('#checkBoxAll').prop("checked", true);
        }
        else {
            $('#checkBoxAll').removeAttr("checked");
        }
    });

如果我选择标题复选框，则应选中所有行，但如果未选中任何行，则应在表中取消选中标题复选框

2 个答案: