abr
7
2010
7
2010
Seleccionar todo, deseleccionar todos los Checkboxes con Jquery
Para seleccionar todas las casillas o deseleccionarlas de un Checkbox lo podemos hacer con jQuery, Siguiendo los siguientes pasos.
Codigo HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div class="controls"> <span><input type="checkbox" class="checkAll" /> <b>Check All</b> <span> or <span><a href="javascript:void(0);" class="invertSelection">Invert Selection</a></span> </div> <div class="elements"> <span><input type="checkbox" class="cb-element" /> Checkbox 1</span> <span><input type="checkbox" class="cb-element" /> Checkbox 2</span> <span><input type="checkbox" class="cb-element" /> Checkbox 3</span> <span><input type="checkbox" class="cb-element" /> Checkbox 4</span> <span><input type="checkbox" class="cb-element" /> Checkbox 5</span> <span><input type="checkbox" class="cb-element" /> Checkbox 6</span> <span><input type="checkbox" class="cb-element" /> Checkbox 7</span> <span><input type="checkbox" class="cb-element" /> Checkbox 8</span> <span><input type="checkbox" class="cb-element" /> Checkbox 9</span> <span><input type="checkbox" class="cb-element" /> Checkbox 10</span> </div> |
Script jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js" language="javascript"></script> <script type="text/javascript" language="javascript"> $( function() { $( '.checkAll' ).live( 'change', function() { $( '.cb-element' ).attr( 'checked', $( this ).is( ':checked' ) ? 'checked' : '' ); $( this ).next().text( $( this ).is( ':checked' ) ? 'Uncheck All' : 'Check All' ); }); $( '.invertSelection' ).live( 'click', function() { $( '.cb-element' ).each( function() { $( this ).attr( 'checked', $( this ).is( ':checked' ) ? '' : 'checked' ); }).trigger( 'change' ); }); $( '.cb-element' ).live( 'change', function() { $( '.cb-element' ).length == $( '.cb-element:checked' ).length ? $( '.checkAll' ).attr( 'checked', 'checked' ).next().text( 'Uncheck All' ) : $( '.checkAll' ).attr( 'checked', '' ).next().text( 'Check All' ); }); }); </script> |
Espero que les sea de utilidad.
2 Comments + Add Comment
Leave a comment
Patrocinador
Siguenos
Suscribete
Correo @zoneartcss.com
Comentarios
- juan manuel en Subdominios con php y .htaccess
- PCHART-Crear gráficas en PHP | Espacio de *M@?!*[lOs KeRoS mUcHo a ToDoS...] en Pchart – Crear gráficas en PHP
- EH en Evitar resize de un textarea con CSS
- KAREN en Envia mensajes de texto gratis a celulares telcel
- Elie Cottage en Ventajas y desventajas de tener un blog gratis

An article by







una bosta
Excelente amigo.