cocher jquery décochez toutes les cases avec un bouton

J’essaie de cocher / décocher toutes les cases à cocher en utilisant jquery. Maintenant, en cochant / décochant la case à cocher parent, toutes les cases à cocher des enfants sont également sélectionnées / désélectionnées avec le texte de la case à cocher parent modifié en cocher / désélectionner.

Maintenant, je veux remplacer la case à cocher parent par un bouton de saisie et changer le texte également sur le bouton pour cocher / décocher. Ce code, quelqu’un peut-il s’il vous plaît modifier le code ….

$( 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 

Essaye celui-là :

 $(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'); }) }) 

DEMO

C’est le moyen le plus court que j’ai trouvé (nécessite jQuery1.6 +)

HTML:

  

JS:

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

J’utilise .prop comme .attr ne fonctionne pas pour les cases à cocher dans jQuery 1.6+ sauf si vous avez explicitement ajouté un atsortingbut vérifié à votre balise d’entrée.

Exemple-

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

Loads of checkboxes

Essaye celui-là:

HTML

  

JavaScript

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

DEMO

Html

  

Javascript

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

Solution pour basculer les cases à l’aide d’un bouton, compatible avec jQuery 1.9+ où l’ événement Google n’est plus 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); }); 

DEMO

Essaye ça:

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

e est l’événement généré lorsque vous click , et e.target est l’élément sur .checkAll vous avez cliqué ( .checkAll ). Il vous suffit donc de checked la propriété des éléments avec la classe .cb-element comme celle de la classe .checkAll`.

PS: Excusez mon mauvais anglais!

Meilleure solution ici 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

essaye ça

 $(".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-promotion effrontée: il existe un plugin jQuery pour cela .

HTML:

 

JS:

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

…et tu as fini.

http://jsfiddle.net/mattball/NrM2P

essaye ça,

  

Vous pouvez utiliser this.checked pour vérifier l’état actuel de la case à cocher,

 $('.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 

Essayez ci-dessous le code pour cocher / décocher toutes les cases à cocher

 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

Je sais que cette question est ancienne, mais j’ai remarqué que la plupart des gens utilisent une case à cocher. La réponse acceptée utilise un bouton, mais ne peut pas fonctionner avec plusieurs boutons (par exemple, un en haut de la première page en bas). Donc, voici une modification qui fait les deux.

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; } }); 

Cela vous permettra d’avoir autant de boutons que vous le souhaitez en modifiant les valeurs de texte et de case à cocher. J’ai inclus un appel e.preventDefault() car cela empêchera la page de sauter vers le haut en raison de la partie href="#" .

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

Voici un lien qui permet de vérifier et de décocher la case à cocher parent et toutes les cases à cocher enfants sont sélectionnées et désélectionnées.

jquery cocher décocher toutes les cases à cocher en utilisant Jquery With Demo

 $(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

ajoutez ceci dans votre bloc de code, ou même cliquez sur votre bouton

 $('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); }); }); 

Le code ci-dessous fonctionnera si l’utilisateur sélectionne toutes les cases à cocher, puis cochez All-Checkbox et si l’utilisateur désélectionne une case, cochez All-Checkbox sera décochée.

 $("#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 

Convenu avec la réponse courte de Richard Garside, mais au lieu d’utiliser prop() dans $(this).prop("checked") vous pouvez utiliser la propriété native de la case à cocher JS, comme,

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

Loads of checkboxes

Vérifier tout avec décocher / cocher le contrôleur si tous les éléments sont / n’est pas coché

JS:

e = case à cocher id t = case à cocher (élément) classe n = case à cocher cocher toutes les classes

 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:

Vérifiez TOUTES la classe de contrôle: chkall_ctrl

  
1.
2.
3.