¿Cómo puedo implementar una casilla de verificación "Seleccionar todo" en mi aplicación ASP.NET MVC?

Question

Tengo una tabla con una columna llena de casillas de verificación. En la parte superior, me gustaría tener una sola casilla de verificación "Seleccionar todo" que verificaría todas las casillas de verificación en esa página.

¿Cómo debo implementar esto? Estoy usando jQuery como mi marco de JavaScript si es que importa.

Answer 1

jQuery (EDITADO para alternar activar/desactivar todos):

$(document).ready(function() { 
    $("#toggleAll").click(function() { 
     $("#chex :checkbox").attr("checked", $(this).attr("checked")); 
    });  
}); 

La razón por la que tenía que hacer un click() continuación, comprobar si hay checked estado se debe a que si se intenta una casilla de verificación "toggle", la casilla de verificación que se está alternando no conservará su estado verificado. De esta forma, conserva el estado de verificación y alterna de forma efectiva.

HTML:

<input type="checkbox" id="toggleAll" /> 
<div id="chex"> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
</div> 

Answer 2

KingNestor:

Usted también va a necesitar este enlace (si aún no lo ha descubierto):

http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysLists...

Answer 3

Mientras que el Las respuestas publicadas anteriormente funcionarán, se encontrará con problemas si tiene más de un conjunto de casillas de verificación en una sola página.

Este formato funcionará independientemente:

<table> 
    <thead> 
     <tr> 
      <th><input type="checkbox" /></th> 
      <th>Column 1</th> 
      <th>Column 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td><input type="checkbox" /></td> 
      <td>Tabular Data 1</td> 
      <td>Tabular Data 2</td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" /></td> 
      <td>Tabular Data 3</td> 
      <td>Tabular Data 4</td> 
     </tr> 
    </tbody> 
</table> 

y el guión ...

$(function() { 
    $('th > :checkbox').click(function() { 
     $(this).closest('table') 
      .find('td > :checkbox') 
      .attr('checked', $(this).is(':checked')); 
    }); 
}); 

Answer 4

modificando ligeramente marcado de la respuesta de Marve (ID dando a la mesa)

Working Demo →

EDITAR:

Versión actualizada donde la casilla 'selectAll' refleja correctamente el estado de las casillas de verificación. P.ej. si selecciona todas las casillas de verificación manualmente, seleccione Todas las casillas de verificación se verificarán automáticamente. Pruebe la demostración para comprender el comportamiento.

Código:

<table id='myTable'> 
    <thead> 
     <tr> 
      <th><input type="checkbox" /></th> 
      <th>Column 1</th> 
      <th>Column 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td><input type="checkbox" /></td> 
      <td>Tabular Data 1</td> 
      <td>Tabular Data 2</td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" /></td> 
      <td>Tabular Data 3</td> 
      <td>Tabular Data 4</td> 
     </tr> 
    </tbody> 
</table> 

Su jQuery podría ser tan simple como esto:

$(document).ready(
    function() 
    { 
     $('#myTable th input:checkbox').click(
      function() 
      { 
       $('#myTable td input:checkbox').attr('checked', $(this).attr('checked')); 
      } 
     ); 

     //The following code keeps the 'selectAll' checkbox in sync with 
     //the manual selection of the checkboxes by user. This is an additional usability feature. 
     $('#myTable tr input:checkbox').click(
      function() 
      { 
       var checkedCount = $('#myTable td input:checkbox:checked').length; 
       var totalCount = $('#myTable td input:checkbox').length; 
       $('#myTable th input:checkbox').attr('checked', checkedCount === totalCount); 
      } 
     ); 
    } 
); 

Answer 5

Esto mantendrá todas las casillas de verificación individuales el mismo que el "marque todas las" uno

$("#id-of-checkall-checkbox").click(function() { 
    $(".class-on-my-checkboxes").attr('checked', this.checked); 
}); 

Esto mantendrá el "marcar todos" uno sincronizado con si las casillas de verificación individuales son o no todas c atacado o no

$(".class-on-my-checkboxes").click(function() { 
    if (!this.checked) { 
     $("#id-of-checkall-checkbox").attr('checked', false); 
    } 
    else if ($(".class-on-my-checkboxes").length == $(".class-on-my-checkboxes:checked").length) { 
     $("#id-of-checkall-checkbox").attr('checked', true); 
    } 
}); 

Answer 6

Pruebe esto para la tabla HTML.

<table class="rptcontenttext" style="width: 100%; border-style: solid; border-collapse: collapse" 
     border="1px" cellpadding="0" cellspacing="0"> 
     <thead> 
      <tr> 
      <th style="text-align:left;width:10px;"> 
      <input type="checkbox" value="true" name="chkVerifySelection" id="chkVerifySelection" onchange="return  checkAllVerifySelection();" /> 
      </th> 
      <td class="rptrowdata" align="left"> 
       Employee ID 
      </td> 
      </tr> 
     </thead> 
     <tbody style="overflow-y: auto; overflow-x: hidden; max-height: 400px; width: 100%;"> 
      @for (int i = 0; i < Model.EmployeeInformationList.Count; i++) 
      {  
      <tr> 
      <td style="width:10px">  
       @{ 
       if (Model.EmployeeInformationList[i].SelectStatus==true) 
       { 
       @Html.CheckBoxFor(model => model.EmployeeInformationList[i].SelectStatus, new { @class = "VerifyStatus" ,disabled =     "disabled",@checked="checked" }) 
       } 
       else 
        { 
        @Html.CheckBoxFor(model => model.EmployeeInformationList[i].SelectStatus, new { @class = "VerifyStatus" }) 
        } 
       }   
      </td>    
      <td class="rptrowdata" align="left" style="width: 70px"> 

       @Html.Encode(Model.EmployeeInformationList[i].StrEmpID) 

      </td> 
       <td class="rptrowdata" align="center" style="width: 50px"> 
       @Html.HiddenFor(m=>m.EmployeeInformationList[i].strEmpOldCardNo) 
       @Html.Encode(Model.EmployeeInformationList[i].strEmpOldCardNo) 
      </td> 
      </tr> 
      } 
     </tbody> 
     </table> 

Guión:

function checkAllVerifySelection() { 
    var flag = $('input[name=chkVerifySelection]').is(':checked'); 
    if (flag) { 
     $(".VerifyStatus").each(function() { 
     $(this).attr('checked', true); 
     }); 
    } 
    else { 
     $(".VerifyStatus").each(function() { 
     $(this).attr('checked', false); 
     }); 
    } 
    return true; 
    }