Marcar / Desmarcar múltiples checkbox a la vez [Jquery] - Trucodigo

Marcar / Desmarcar múltiples checkbox a la vez [Jquery]




Hola trucodigueros en esta ocasion les traigo un código jQuery de 1 sola línea para activar/desactivar todos checkbox a la vez usando el método prop().

En el siguiente ejemplo he creado un primer checkbox que será el que ejecute el script de activar o desactivar el resto de elementos checkbox:

lo que tendremos que hacer es colocar esto

HTML
<ul>
<li><label><input type="checkbox" id="checkTodos" />Marcar/Desmarcar Todos</label></li>
<li><label><input type="checkbox" name="lenguaje[]" /> PHP</label></li>
<li><label><input type="checkbox" name="lenguaje[]" /> Ajax</label></li>
<li><label><input type="checkbox" name="lenguaje[]" /> jQuery</label></li>
<li><label><input type="checkbox" name="lenguaje[]" /> Android</label></li>
<li><label><input type="checkbox" name="lenguaje[]" /> XML</label></li>
</ul>


CSS
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,300italic,400italic);

body{
font-family: 'Open Sans', sans-serif;
font-size:14px;
line-height:20px;
}

li{
list-style:none;
}
li:first-child{
margin-bottom:10px;
font-weight:bold;
}
label{
cursor: pointer;
}


y la linea de codigo de JQUERY

$('document').ready(function(){
$("#checkTodos").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
});


y como siempre al usar jquery enlazar la libreria

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>



Para los novatos esto lo colocarias asi

HTML dentro del body en donde quieran que aparezca
CSS dentro del head entre etiquetas <style>
JQUERY dentro del head entre etiquetas <script>
y la libreria justo arriva del codigo JQUERY


bueno eso seria todo espero les haya gustado y como siempre me despido dejando una

DEMO 1

DEMO 2
Tags
Opciones
Estadísticas
Creado 23.11.2015 a las 23:36 hs
Categoría JavaScript
  • 0
    Medallas
  • 0
    Favoritos
  • 1189
    Visitas
  • 0
    Puntos
  • 0
    Seguidores
Posts relacionados
Comentarios
0
Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Patrocinador
Autor del post
Ver perfil de Omaredomex Omaredomex
Hombre Administrador  Mensaje
0 81 2
Medallas
No tiene medallas
Últimos visitantes