jquery check desmarque todas las casillas de verificación con un botón

Estoy intentando marcar / desmarcar todas las casillas usando jquery. Ahora, al marcar / desmarcar la checkbox principal, todas las casillas de verificación secundarias se seleccionan / deseleccionan también con el texto del casillero principal cambiando a checkall / uncheckall.

Ahora quiero reemplazar la checkbox principal con un botón de entrada, y cambiar el texto también en el botón para marcar todo / desmarcar todo. Este es el código, ¿alguien puede ajustar el código …

$( function() { $( '.checkAll' ).live( 'change', function() { $( '.cb-element' ).attr( 'checked', $( this ).is( ':checked' ) ? 'checked' : '' ); $( this ).next().text( $( this ).is( ':checked' ) ? 'Uncheck All' : 'Check All' ); }); $( '.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' ); }); });  Check All  Checkbox 1  Checkbox 2  Checkbox 3 

Prueba este:

 $(document).ready(function(){ $('.check:button').toggle(function(){ $('input:checkbox').attr('checked','checked'); $(this).val('uncheck all'); },function(){ $('input:checkbox').removeAttr('checked'); $(this).val('check all'); }) }) 

MANIFESTACIÓN

Esta es la forma más corta que he encontrado (necesita jQuery1.6 +)

HTML:

  

JS:

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

Estoy usando .prop como .attr no funciona para casillas de verificación en jQuery 1.6+ a menos que haya agregado explícitamente un atributo marcado a su etiqueta de entrada.

Ejemplo-

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

Loads of checkboxes

Prueba este:

HTML

  

JavaScript

 $('#checkall:checkbox').change(function () { if($(this).attr("checked")) $('input:checkbox').attr('checked','checked'); else $('input:checkbox').removeAttr('checked'); });​ 

MANIFESTACIÓN

Html

  

Javascript

  $('.checkAll').click(function(){ if($(this).attr('checked')){ $('input:checkbox').attr('checked',true); } else{ $('input:checkbox').attr('checked',false); } }); 

Solución para alternar casillas de verificación usando un botón, compatible con jQuery 1.9+ donde toogle-event ya no está disponible :

 $('.check:button').click(function(){ var checked = !$(this).data('checked'); $('input:checkbox').prop('checked', checked); $(this).val(checked ? 'uncheck all' : 'check all' ) $(this).data('checked', checked); }); 

MANIFESTACIÓN

Prueba esto:

 $('.checkAll').on('click', function(e) { $('.cb-element').prop('checked', $(e.target).prop('checked')); }); 

e es el evento generado al hacer click , y e.target es el elemento al que se hace clic ( .checkAll ), por lo que solo debe poner la propiedad checked de los elementos con la clase .cb-element como la del elemento con la clase .checkAll`.

PD: ¡Disculpe mi mal inglés!

La mejor solución aquí Check Fiddle

 $("#checkAll").change(function () { $("input:checkbox.cb-element").prop('checked', $(this).prop("checked")); }); $(".cb-element").change(function () { _tot = $(".cb-element").length _tot_checked = $(".cb-element:checked").length; if(_tot != _tot_checked){ $("#checkAll").prop('checked',false); } }); 
  ALL 
Checkbox 1 Checkbox 2 Checkbox 3

prueba esto

 $(".checkAll").click(function() { if("checkall" === $(this).val()) { $(".cb-element").attr('checked', true); $(this).val("uncheckall"); //change button text } else if("uncheckall" === $(this).val()) { $(".cb-element").attr('checked', false); $(this).val("checkall"); //change button text } }); 

Auto-promoción desvergonzada: hay un plugin de jQuery para eso .

HTML:

 

JS:

 $('#checkall').checkAll('#slaves input:checkbox', { reportTo: function () { var prefix = this.prop('checked') ? 'un' : ''; this.next().text(prefix + 'check all'); } });​ 

…y tu estas listo.

http://jsfiddle.net/mattball/NrM2P

prueba esto,

  

Puedes usar esto. this.checked para verificar el estado actual de la checkbox.

 $('.checkAll').change(function(){ var state = this.checked; //checked ? - true else false state ? $(':checkbox').prop('checked',true) : $(':checkbox').prop('checked',false); //change text state ? $(this).next('b').text('Uncheck All') : $(this).next('b').text('Check All') }); 
 $('.checkAll').change(function(){ var state = this.checked; state? $(':checkbox').prop('checked',true):$(':checkbox').prop('checked',false); state? $(this).next('b').text('Uncheck All') :$(this).next('b').text('Check All') }); 
   Check All  Checkbox 1  Checkbox 2  Checkbox 3 

Pruebe el siguiente código para marcar / desmarcar todas las casillas de verificación

 jQuery(document).ready(function() { $("#check_uncheck").change(function() { if ($("#check_uncheck:checked").length) { $(".checkboxes input:checkbox").prop("checked", true); } else { $(".checkboxes input:checkbox").prop("checked", false); } }) }); 
   Check All/Uncheck All 

Check Box 1
Check Box 2
Check Box 3
Check Box 4

Sé que esta pregunta es antigua, pero noté que la mayoría de la gente usa una checkbox. La respuesta aceptada utiliza un botón, pero no puede funcionar con varios botones (por ejemplo, uno en la parte superior de la página uno en la parte inferior). Entonces aquí hay una modificación que hace ambas cosas.

HTML

 Check All 

jQuery

 var ischecked = false; $(".check-box-machine").click(function(e) { e.preventDefault(); if (ischecked == false) { $("input:checkbox").attr("checked","checked"); $(".check-box-machine").html("Uncheck All"); ischecked = true; } else { $("input:checkbox").removeAttr("checked"); $(".check-box-machine").html("Check All"); ischecked = false; } }); 

Esto le permitirá tener tantos botones como desee con el cambio de texto y los valores de la checkbox. e.preventDefault() una llamada e.preventDefault() porque esto evitará que la página salte a la cima debido a la parte href="#" .

 $(function () { $('input#check_all').change(function () { $("input[name='input_ids[]']").prop('checked', $(this).prop("checked")); }); }); 

Aquí hay un enlace, que se utiliza para marcar y desmarcar la casilla principal y todas las casillas secundarias se seleccionan y deseleccionan.

jquery check desmarque todas las casillas de verificación Uso de Jquery con demostración

 $(function () { $("#select-all").on("click", function () { var all = $(this); $('input:checkbox').each(function () { $(this).prop("checked", all.prop("checked")); }); }); }); 
   
one
two
three
four
five
six
seven
eight
nine
ten
s

agregue esto en su bloque de código, o incluso haga clic en su botón

 $('input:checkbox').attr('checked',false); 
 $(document).ready( function() { // Check All $('.checkall').click(function () { $(":checkbox").attr("checked", true); }); // Uncheck All $('.uncheckall').click(function () { $(":checkbox").attr("checked", false); }); }); 

El código a continuación funcionará si el usuario selecciona todas las casillas de verificación, luego marca la checkbox de todas las casillas de verificación y si el usuario deselecciona una de las casillas de verificación, la opción marcar todas se desactivará.

 $("#checkall").change(function () { $("input:checkbox").prop('checked', $(this).prop("checked")); }); $(".cb-element").change(function () { if($(".cb-element").length==$(".cb-element:checked").length) $("#checkall").prop('checked', true); else $("#checkall").prop('checked', false); }); 
  Check All  Checkbox 1  Checkbox 2  Checkbox 3 

Estoy de acuerdo con la respuesta corta de Richard Garside, pero en lugar de usar prop() en $(this).prop("checked") puede usar la propiedad de checkbox de JS nativa, como

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

Loads of checkboxes

Marque Todo con desmarcar / verificar controlador si todos los artículos son / isnt marcados

JS:

e = checkbox id t = checkbox (item) class n = checkbox verifique toda la clase

 function checkAll(e,t,n){jQuery("#"+e).click(function(e){if(this.checked){jQuery("."+t).each(function(){this.checked=true;jQuery("."+n).each(function(){this.checked=true})})}else{jQuery("."+t).each(function(){this.checked=false;jQuery("."+n).each(function(){this.checked=false})})}});jQuery("."+t).click(function(e){var r=jQuery("."+t).length;var i=0;var s=0;jQuery("."+t).each(function(){if(this.checked==true){i++}if(this.checked==false){s++}});if(r==i){jQuery("."+n).each(function(){this.checked=true})}if(i 

HTML:

Marque TODA la clase de control: chkall_ctrl

  
1.
2.
3.