$(function () { // add multiple select / deselect functionality $("#checkAll").click(function () { $('.itemCheck').attr('checked', this.checked); }); $(".itemCheck").click(function () { if ($(".itemCheck").length == $(".itemCheck:checked").length) { $("#checkAll").attr("checked", "checked"); } else { $("#checkAll").removeAttr("checked"); } }); });
<fieldset class="formLayout"> <legend>Selección / Deselección Múltiple - Checkbox</legend> <p><b>Ejemplo Práctico:</b> </p> <table class="tabla"> <tr> <th>Todos <input type="checkbox" id="checkAll" /> </th> <th>Código Cliente</th> <th>Deuda</th> <th>Fecha de Emisión</th> <th>Fecha de Vencimiento</th> </tr> <tr> <td align="center"> <input type="checkbox" class="itemCheck" value="1" /> </td> <td>4174617</td> <td>Servicio de Agua</td> <td>20/02/2014</td> <td>30/02/2014</td> </tr> <tr> <td align="center"> <input type="checkbox" class="itemCheck" value="2" /> </td> <td>4174613</td> <td>Servicio de Luz</td> <td>20/02/2014</td> <td>30/02/2014</td> </tr> <tr> <td align="center"> <input type="checkbox" class="itemCheck" value="3" /> </td> <td>4174589</td> <td>Servicio de Teléfono</td> <td>20/02/2014</td> <td>30/02/2014</td> </tr> <tr> <td align="center"> <input type="checkbox" class="itemCheck" value="4" /> </td> <td>4174576</td> <td>Servicio de TV/Cable</td> <td>20/02/2014</td> <td>30/02/2014</td> </tr> <tr> <td align="center"> <input type="checkbox" class="itemCheck" value="5" /> </td> <td>4174554</td> <td>Servicio de Internet</td> <td>20/02/2014</td> <td>30/02/2014</td> </tr> </table> <input type="button" value="Enviar Recibo" /> </fieldset>
fieldset.formLayout { padding-left: 10px; padding-bottom: 5px; padding-right: 10px; background-color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } fieldset.formLayout table { border-spacing:5px; } .formLayout legend { color: #666; font-weight: bold; height: 14px; } table.tableFormLayout td { padding-top:10px; } .tabla { background-color: #fff; width: 50%; margin: 5px 0 10px 3px; color: #333333; font-size: 11px; border-collapse:collapse; border: 1px solid #666; } .tabla tr:hover { background-color: #FFFFD4; font-weight: bold; } .tabla tr { background-color: #fff; } .tabla th { border: 1px solid #666; background-color: #A9BCF5; color: #000; font-weight: bold; padding-top:3px; padding-bottom:3px; font-size: 11px; } .tabla td { padding: 2px; border-collapse: collapse; border-width: 1px; border: 1px solid #666; }