Comment vérifier toutes les cases à cocher à l'aide de jQuery ?

Question

Je ne suis pas expert en jQuery mais j'ai essayé de créer un petit script pour mon application. Je veux cocher toutes les cases à cocher mais cela ne fonctionne pas correctement.

J'ai d'abord essayé d'utiliser attr et après cela, j'ai essayé avec prop mais je fais quelque chose de mal.

J'ai d'abord essayé ça :

$("#checkAll").change(function(){

  if (! $('input:checkbox').is('checked')) {
      $('input:checkbox').attr('checked','checked');
  } else {
      $('input:checkbox').removeAttr('checked');
  }       
});

Mais ça n'a pas marché.

Suivant : Cela a mieux fonctionné que le code ci-dessus

$("#checkAll").change(function(){

  if (! $('input:checkbox').is('checked')) {
      $('input:checkbox').prop('checked',true);
  } else {
      $('input:checkbox').prop('checked', false);
  }       
});

Les deux exemples ne fonctionnent pas.

JSFiddle : http://jsfiddle.net/hhZfu/4/

Answer 1

Vous devez utiliser .prop() pour définir la propriété cochée

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

Démonstration : Violon

Answer 2

Il suffit d'utiliser le checked de l checkAll et utiliser utiliser utiliser prop() au lieu de attr pour la propriété vérifiée

Démonstration en direct

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

Utilisez prop() au lieu de attr() pour les propriétés telles que checked.

Depuis la version 1.6 de jQuery, la méthode .attr() renvoie undefined pour les attributs qui n'ont pas été définis. Pour récupérer et modifier les propriétés DOM telles que l'état coché, sélectionné ou désactivé des éléments de formulaire, utilisez la méthode .prop()

Vous avez le même id pour les cases à cocher et il devrait être unique . Il est préférable d'utiliser une classe avec les cases à cocher dépendantes afin qu'elle n'inclue pas l'élément cases à cocher que vous ne voulez pas. Comme $('input:checkbox') sélectionnera toutes les cases à cocher de la page. Si votre page est enrichie de nouvelles cases à cocher, celles-ci seront également sélectionnées/désélectionnées. Ce qui n'est peut-être pas le comportement souhaité.

Démonstration en direct

$('#checkAll').click(function () {    
    $(':checkbox.checkItem').prop('checked', this.checked);    
});

Answer 3

Une solution complète est ici.

$(document).ready(function() {
    $("#checkedAll").change(function() {
        if (this.checked) {
            $(".checkSingle").each(function() {
                this.checked=true;
            });
        } else {
            $(".checkSingle").each(function() {
                this.checked=false;
            });
        }
    });

    $(".checkSingle").click(function () {
        if ($(this).is(":checked")) {
            var isAllChecked = 0;

            $(".checkSingle").each(function() {
                if (!this.checked)
                    isAllChecked = 1;
            });

            if (isAllChecked == 0) {
                $("#checkedAll").prop("checked", true);
            }     
        }
        else {
            $("#checkedAll").prop("checked", false);
        }
    });
});

Html devrait être :

Une seule case à cocher sur trois cases à cocher sera sélectionnée et désélectionnée.

<input type="checkbox" name="checkedAll" id="checkedAll" />

<input type="checkbox" name="checkAll" class="checkSingle" />
<input type="checkbox" name="checkAll" class="checkSingle" />
<input type="checkbox" name="checkAll" class="checkSingle" />

J'espère que cela aidera quelqu'un comme ce fut le cas pour moi.

JS Fiddle https://jsfiddle.net/52uny55w/

Answer 4

Je pense que lorsque l'utilisateur sélectionne toutes les cases à cocher manuellement, toutes les cases à cocher doivent être cochées automatiquement ou que l'utilisateur en décoche une parmi toutes les cases à cocher sélectionnées, toutes les cases à cocher doivent être décochées automatiquement. voici mon code

$('#checkall').change(function () {
    $('.cb-element').prop('checked',this.checked);
});

$('.cb-element').change(function () {
 if ($('.cb-element:checked').length == $('.cb-element').length){
  $('#checkall').prop('checked',true);
 }
 else {
  $('#checkall').prop('checked',false);
 }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/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

Answer 5

$(document).ready(function() {
  $("#parent").click(function() {
    $(".child").prop("checked", this.checked);
  });

  $('.child').click(function() {
    if ($('.child:checked').length == $('.child').length) {
      $('#parent').prop('checked', true);
    } else {
      $('#parent').prop('checked', false);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<p><input type="checkbox" id="parent" /> Check/Uncheck All</p>
<ul>
  <li>
    <input type="checkbox" class="child" /> Checkbox 1</li>
  <li>
    <input type="checkbox" class="child" /> Checkbox 2</li>
  <li>
    <input type="checkbox" class="child" /> Checkbox 3</li>
</ul>

HTML :

<p><input type="checkbox" id="parent" /> Check/Uncheck All</p>
<ul>
  <li>
    <input type="checkbox" class="child" /> Checkbox 1</li>
  <li>
    <input type="checkbox" class="child" /> Checkbox 2</li>
  <li>
    <input type="checkbox" class="child" /> Checkbox 3</li>
</ul>

jQuery :

$(document).ready(function() {
  $("#parent").click(function() {
    $(".child").prop("checked", this.checked);
  });

  $('.child').click(function() {
    if ($('.child:checked').length == $('.child').length) {
      $('#parent').prop('checked', true);
    } else {
      $('#parent').prop('checked', false);
    }
  });
});