Comment cocher / décocher toutes les cases à cocher avec un bouton en utilisant jQuery?


158

J'essaye de cocher / décocher toutes les cases en utilisant jQuery. Maintenant, en cochant / décochant la case à cocher parent, toutes les cases à cocher enfants sont également sélectionnées / désélectionnées avec le texte de la case à cocher parent changée en checkall / uncheckall.

Maintenant, je veux remplacer la case à cocher parent par un bouton d'entrée et changer le texte également sur le bouton pour cocher / décocher. Il y a le 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' );

        });
    });


   <input type="checkbox" class="checkAll" /> <b>Check All</b>

   <input type="checkbox" class="cb-element" /> Checkbox  1
   <input type="checkbox" class="cb-element" /> Checkbox  2
   <input type="checkbox" class="cb-element" /> Checkbox  3


Vérifiez le tutoriel avec jQuery freakyjolly.com/…
Code Spy

Réponses:


228

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


6
-1 car toggle n'est pas fait pour fonctionner comme ça: api.jquery.com/toggle (au moins la version actuelle)
estani

2
Ne fonctionne que pour un bouton, si vous en avez besoin de plusieurs, il est préférable de l'utiliser.click()
foochow

5
Attention: cette réponse vérifie littéralement toutes les cases à cocher de votre formulaire. Sautez sauf si vous le souhaitez. Pour plusieurs vérifications, cette réponse m'a aidé: stackoverflow.com/a/27148382/3448554
Kelsey Hannan

1
J'ai essayé ce code, mais pourquoi ma case à cocher disparaît-elle? xD et il a une propriété "display: none" dessus
melvnberd

10
Avec les dernières versions de jQuery, .attr()et removeAttr()ne doit pas être utilisé avec l'attribut «vérifié». Comme removeAttr()supprimera l'attribut au lieu de le définir sur false. .prop('checked', true)ou .prop('checked', false)devrait être utilisé à la place, comme expliqué dans la réponse @ richard-garside.
David Torres

110

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

HTML:

<input type="checkbox" id="checkAll"/>

JS:

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

J'utilise .prop car .attr ne fonctionne pas pour les cases à cocher dans jQuery 1.6+ sauf si vous avez explicitement ajouté un attribut coché à votre balise d'entrée.

Exemple-

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="#">
    <p><label><input type="checkbox" id="checkAll"/> Check all</label></p>
    
    <fieldset>
        <legend>Loads of checkboxes</legend>
        <p><label><input type="checkbox" /> Option 1</label></p>
        <p><label><input type="checkbox" /> Option 2</label></p>
        <p><label><input type="checkbox" /> Option 3</label></p>
        <p><label><input type="checkbox" /> Option 4</label></p>
    </fieldset>
</form>


Comment utilisez-vous celui-ci? Une chance de voir un violon?
Drewdavid

1
Réponse simple, mais OP voulait un bouton
vphilipnyc

Comment «désélectionner tout» de cette manière?
Michal Skop

@MichalSkop Ce code sélectionne ou désélectionne selon que #checkAll est coché ou non. Si vous voulez tout décocher, vous pouvez simplement utiliser la valeur false comme ceci $ ("input: checkbox"). Prop ('checked', false);
Richard Garside

Merci, très facile!
viniciussvl

17

Essaye celui-là:

HTML

<input type="checkbox" name="all" id="checkall" />

JavaScript

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

DEMO


Oui merci ce code parfait, même s'il change de DOM LEVEL. J'ai essayé de coder, mais même j'ai essayé d'autres plugins qui ne fonctionnent pas non plus. Celui-ci est parfait.
Rafee

14

HTML

<input type="checkbox" name="select_all" id="select_all" class="checkAll" />

Javascript

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

6
Utilisez .prop au lieu de .attr si vous utilisez jQuery1.6 +
Richard Garside

5

Solution pour basculer les cases à cocher à l'aide d'un bouton, compatible avec jQuery 1.9+ où toogle-event 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


Remplacement du bouton par une case à cocher et «entrée: case à cocher» par une classe, pour mes besoins, et cela a très bien fonctionné!
RationalRabbit

5

Essaye ça:

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

eest l'événement généré lorsque vous le faites click, ete.target l'élément cliqué ( .checkAll), vous n'avez donc qu'à mettre la propriété checkeddes éléments avec une classe .cb-elementcomme celle de l'élément avec la classe .checkAll`.

PS: Excusez mon mauvais anglais!


1
Hey Ruben, vous devriez ajouter un commentaire à votre réponse afin que l'OP puisse comprendre comment vous avez exactement résolu ce problème
edi9999

Merci pour votre aide @ edi9999, je suis un débutant
Ruben Perez

1
Cette réponse est meilleure IMO puisque la réponse acceptée cochera toutes les cases à cocher de votre formulaire , tandis que votre modèle vous permet de cibler facilement différents éléments de formulaire HTML $ ("# id") ou $ (". Class") via un modèle comme $('#all_news_items').on('click', function(e) { $('.news-item-option').prop('checked', $(e.target).prop('checked')); }); sans le checkall fonctions interférant avec d'autres éléments de formulaire, vous pouvez donc ajouter facilement un nouveau checkall:$('#all_specializations').on('click', function(e) { $('.specialization-option').prop('checked', $(e.target).prop('checked')); });
Kelsey Hannan

4

Tu peux essayer ça

    $('.checkAll').on('click',function(){
        $('.checkboxes').prop('checked',$(this).prop("checked"));
    });`

La classe .checkAllest une case à cocher qui contrôle l'action en masse


3

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

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="#">
    <p><label><input type="checkbox" id="checkAll"/> Check all</label></p>
    
    <fieldset>
        <legend>Loads of checkboxes</legend>
        <p><label><input type="checkbox" /> Option 1</label></p>
        <p><label><input type="checkbox" /> Option 2</label></p>
        <p><label><input type="checkbox" /> Option 3</label></p>
        <p><label><input type="checkbox" /> Option 4</label></p>
    </fieldset>
</form>


3

Cochez / décochez tout avec la propriété intermédiaire à l'aide de jQuery

Obtenir les éléments vérifiés dans le tableau à l'aide de la méthode getSelectedItems ()

Liste de cases à cocher source Sélectionner / désélectionner tout avec contrôle principal indéterminé

entrez la description de l'image ici

HTML

<div class="container">
  <div class="card">
    <div class="card-header">
      <ul class="list-group list-group-flush">
        <li class="list-group-item">
          <input
            class="form-check-input"
            type="checkbox"
            value="selectAll"
            id="masterCheck"
          />
          <label class="form-check-label" for="masterCheck">
            Select / Unselect All
          </label>
        </li>
      </ul>
    </div>
    <div class="card-body">
      <ul class="list-group list-group-flush" id="list-wrapper">
        <li class="list-group-item">
          <input
            class="form-check-input"
            type="checkbox"
            value="item1"
            id="item1"
          />
          <label class="form-check-label" for="item1">
            Item 1
          </label>
        </li>
        <li class="list-group-item">
          <input
            class="form-check-input"
            type="checkbox"
            value="item2"
            id="item2"
          />
          <label class="form-check-label" for="item2">
            Item 2
          </label>
        </li>
        <li class="list-group-item">
          <input
            class="form-check-input"
            type="checkbox"
            value="item3"
            id="item3"
          />
          <label class="form-check-label" for="item3">
            Item 3
          </label>
        </li>
        <li class="list-group-item">
          <input
            class="form-check-input"
            type="checkbox"
            value="item4"
            id="item4"
          />
          <label class="form-check-label" for="item4">
            Item 4
          </label>
        </li>
        <li class="list-group-item">
          <input
            class="form-check-input"
            type="checkbox"
            value="item5"
            id="item5"
          />
          <label class="form-check-label" for="item5">
            Item 5
          </label>
        </li>
        <li class="list-group-item" id="selected-values"></li>
      </ul>
    </div>
  </div>
</div>

jQuery

  $(function() {
    // ID selector on Master Checkbox
    var masterCheck = $("#masterCheck");
    // ID selector on Items Container
    var listCheckItems = $("#list-wrapper :checkbox");

    // Click Event on Master Check
    masterCheck.on("click", function() {
      var isMasterChecked = $(this).is(":checked");
      listCheckItems.prop("checked", isMasterChecked);
      getSelectedItems();
    });

    // Change Event on each item checkbox
    listCheckItems.on("change", function() {
      // Total Checkboxes in list
      var totalItems = listCheckItems.length;
      // Total Checked Checkboxes in list
      var checkedItems = listCheckItems.filter(":checked").length;

      //If all are checked
      if (totalItems == checkedItems) {
        masterCheck.prop("indeterminate", false);
        masterCheck.prop("checked", true);
      }
      // Not all but only some are checked
      else if (checkedItems > 0 && checkedItems < totalItems) {
        masterCheck.prop("indeterminate", true);
      }
      //If none is checked
      else {
        masterCheck.prop("indeterminate", false);
        masterCheck.prop("checked", false);
      }
      getSelectedItems();
    });

    function getSelectedItems() {
      var getCheckedValues = [];
      getCheckedValues = [];
      listCheckItems.filter(":checked").each(function() {
        getCheckedValues.push($(this).val());
      });
      $("#selected-values").html(JSON.stringify(getCheckedValues));
    }
  });

2

La meilleure solution ici Vérifiez 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);
        }
});
<input type="checkbox" id="checkAll"/> ALL

<br />

<input type="checkbox" class="cb-element" /> Checkbox  1
<input type="checkbox" class="cb-element" /> Checkbox  2
<input type="checkbox" class="cb-element" /> Checkbox  3

2

Le code ci-dessous fonctionnera si l'utilisateur sélectionne toutes les cases à cocher, puis la case à cocher tout sera cochée et si l'utilisateur désélectionne une case à cocher, la case à cocher tout 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);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="all" id="checkall" />Check All</br>

<input type="checkbox" class="cb-element" /> Checkbox  1</br>
<input type="checkbox" class="cb-element" /> Checkbox  2</br>
<input type="checkbox" class="cb-element" /> Checkbox  3


1

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

J'ai essayé votre script, mais pas de chance. Pouvez-vous s'il vous plaît voir ceci si j'ai implémenté correctement ou non ..? Démo
Ravi

1

Auto-promotion sans vergogne: il existe un plugin jQuery pour cela .

HTML:

<form action="#" id="myform">
    <div><input type="checkbox" id="checkall"> <label for="checkall"> Check all</label></div>
    <fieldset id="slaves">
        <div><label><input type="checkbox"> Checkbox</label></div>
        <div><label><input type="checkbox"> Checkbox</label></div>
        <div><label><input type="checkbox"> Checkbox</label></div>
        <div><label><input type="checkbox"> Checkbox</label></div>
        <div><label><input type="checkbox"> Checkbox</label></div>
    </fieldset>
</form>

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


1

essaye ça,

<input type="checkbox" class="checkAll" onclick="$('input[type=checkbox][class=cb-element]').attr('checked',this.checked)">

1

Vous pouvez utiliser this.checkedpour 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')
});


1

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

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);
        }
    })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" name="check_uncheck" id="check_uncheck" /> Check All/Uncheck All
<br/>
<br/>
<div class="checkboxes">
    <input type="checkbox" name="check" id="check" /> Check Box 1
    <br/>
    <input type="checkbox" name="check" id="check" /> Check Box 2
    <br/>
    <input type="checkbox" name="check" id="check" /> Check Box 3
    <br/>
    <input type="checkbox" name="check" id="check" /> Check Box 4
</div>

Essayez ce lien de démonstration

Il existe également un autre moyen rapide de le faire, consultez l'exemple ci-dessous. Dans cet exemple, cocher / décocher toutes les cases à cocher est coché ou non si coché alors tout sera coché et sinon tout sera décoché

$("#check_uncheck").change(function() {
    $(".checkboxes input:checkbox").prop("checked",$(this).is(':checked'));
})
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <input type="checkbox" name="check_uncheck" id="check_uncheck" /> Check All/Uncheck All
    <br/>
    <br/>
    <div class="checkboxes">
        <input type="checkbox" name="check" id="check" /> Check Box 1
        <br/>
        <input type="checkbox" name="check" id="check" /> Check Box 2
        <br/>
        <input type="checkbox" name="check" id="check" /> Check Box 3
        <br/>
        <input type="checkbox" name="check" id="check" /> Check Box 4
    </div>


0

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 (ex. Un en haut de la page, un en bas). Voici donc une modification qui fait les deux.

HTML

<a href="#" class="check-box-machine my-button-style">Check All</a>

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 e.preventDefault()appel car cela empêchera la page de sauter vers le haut en raison de la href="#"partie.


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

Pourriez-vous s'il vous plaît modifier une explication de la raison pour laquelle ce code répond à la question? Les réponses basées uniquement sur le code sont déconseillées, car elles n'enseignent pas la solution.
Scimonster


0
<script type="text/javascript">
    function myFunction(checked,total_boxes){ 
         for ( i=0 ; i < total_boxes ; i++ ){ 
           if (checked){   
             document.forms[0].checkBox[i].checked=true; 
            }else{  
             document.forms[0].checkBox[i].checked=false; 
            } 
        }   
    } 
</script>
    <body>
        <FORM> 
            <input type="checkbox" name="checkBox" >one<br> 
            <input type="checkbox" name="checkBox" >two<br> 
            <input type="checkbox" name="checkBox" >three<br> 
            <input type="checkbox" name="checkBox" >four<br> 
            <input type="checkbox" name="checkBox" >five<br> 
            <input type="checkbox" name="checkBox" >six<br> 
            <input type="checkbox" name="checkBox" >seven<br> 
            <input type="checkbox" name="checkBox" >eight<br> 
            <input type="checkbox" name="checkBox" >nine<br>
            <input type="checkbox" name="checkBox" >ten<br>  s
            <input type=button name="CheckAll" value="Select_All" onClick="myFunction(true,10)"> 
            <input type=button name="UnCheckAll" value="UnCheck All Boxes" onClick="myFunction(false,10)"> 
        </FORM> 
    </body>

0

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

$('input:checkbox').attr('checked',false);

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

-1

Vérifier tout avec décocher / vérifier le contrôleur si tous les éléments sont / ne sont pas cochés

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<r){jQuery("."+n).each(function(){this.checked=false})}})}

HTML:

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

<input type="checkbox"name="chkall" id="chkall_up" class="chkall_ctrl"/>
<br/>
1.<input type="checkbox" value="1" class="chkall" name="chk[]" id="chk1"/><br/>
2.<input type="checkbox" value="2" class="chkall" name="chk[]" id="chk2"/><br/>
3.<input type="checkbox" value="3" class="chkall" name="chk[]" id="chk3"/><br/>
<br/>
<input type="checkbox"name="chkall" id="chkall_down" class="chkall_ctrl"/>

<script>
jQuery(document).ready(function($)
{
  checkAll('chkall_up','chkall','chkall_ctrl');
  checkAll('chkall_down','chkall','chkall_ctrl');
});
 </script>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.