web-dev-qa-db-fra.com

JQuery "tout sélectionner" case à cocher

J'essaie de sélectionner toutes les cases à cocher sur une page une fois que la case à cocher "Tout sélectionner" est cochée et j'utilise jQuery pour cela, comme vous pouvez le voir sur le lien ci-dessous:

http://jsfiddle.net/priyam/K9P8A/

Le code pour sélectionner et désélectionner tout la case à cocher est:

function selectAll() {
    $('.selectedId').attr('checked', isChecked('selectall'));
}

function isChecked(checkboxId) {
    var id = '#' + checkboxId;
    return $(id).is(":checked");
}

Après une journée de travail, je ne sais toujours pas pourquoi je ne peux pas le faire fonctionner. S'il vous plaît aider

javascriptjqueryhtml
13
Prim

Votre violon fonctionne après que j'ai fait 3 corrections :

  • import de jQuery (menu en haut à gauche) 
  • ajout de la fonction isChecked manquante
  • utilisation de prop au lieu de attr pour cocher les cases
12
Denys Séguret

Pourquoi ne le fais-tu pas de cette façon? C'est plus clair et lisible

$('#selectall').click(function () {
    $('.selectedId').prop('checked', this.checked);
});

$('.selectedId').change(function () {
    var check = ($('.selectedId').filter(":checked").length == $('.selectedId').length);
    $('#selectall').prop("checked", check);
});

DEMO

23
letiagoalves

C'est parce que la méthode selectAll n'est pas disponible dans la portée globale.

Dans la deuxième liste déroulante dans le panneau de gauche Frameworks and Extensions, sélectionnez no -wrap head/body, cela fonctionnera correctement.

La raison d'être par défaut onload est sélectionnée et lorsque l'option onload est sélectionnée, tout le script entré est encapsulé dans une fonction anonyme, comme indiqué ci-dessous. La fonction selectAll deviendra une méthode locale dans la fonction anonyme. Ainsi, votre gestionnaire d'événements onclick qui utilise la portée globale n'aura pas accès à la méthode, ce qui provoquera une erreur Uncaught ReferenceError: selectAll is not defined.

$(window).load(function(){
    //Entered script
});

Démo: Fiddle

Update Mais vous pouvez le simplifier comme 

$(function(){
    $('#selectall').click(function(i, v){
        $('.selectedId').prop('checked', this.checked);
    });

    var checkCount = $('.selectedId').length;
    $('.selectedId').click(function(i, v){
        $('#selectall').prop('checked',$('.selectedId:checked').length  == checkCount)
    });
});

et supprimez tous les gestionnaires onclick des éléments en entrée, comme indiqué dans cette démo

7
Arun P Johny
$(document).ready(function () {
    $('#selectall').click(function () {
        $('.selectedId').prop('checked', $(this).is(":checked"));
    });
});

more Optimized
4
Google User

Utilisez ceci...

$('#selectall').on('click', function() {
    $('.selectedId').attr('checked', $(this).is(":checked"));
});

An see this DEMO

4
MG_Bautista

Assumer que la case à cocher parent a une classe de mainselect et que tous les enfants ont une classe de childselect

Sélectionnez ensuite le parent pour cocher toutes les cases et inversement avec le code ci-dessous:

$('#mainselect').live('change',function(){
if($(this).attr('checked') == 'checked') {
    $('.childselect').attr('checked','checked');
} else {
    $('.childselect').removeAttr('checked');
}
});
0
Pavan Mehta

$ (function () {

// add multiple select / deselect functionality
$("#selectall").click(function () {
      $('.case').attr('checked', this.checked);
});

// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){

    if($(".case").length == $(".case:checked").length) {
        $("#selectall").attr("checked", "checked");
    } else {
        $("#selectall").removeAttr("checked");
    }

});

});

0
Pratiksha Raikundaliya

Cela devrait faire l'affaire pour vous.

$(document).ready(function () {
    $('#selectall').click(function () {
         var checked = $(this).is(':checked');            
        $('.selectedId').each(function () {
            var checkBox = $(this);               
            if (checked) {
                checkBox.prop('checked', true);                
            }
            else {
                checkBox.prop('checked', false);                
            }
        });

    });
});

JsFiddle http://jsfiddle.net/Ra3uL/

0
Shyju

Vous pouvez simplement ajouter la fonction handle à l'événement click sur la case à cocher Sélectionner tout:

$('#chk-all-items').click(selectAll);

Et puis cette fonction devrait suffire à tout sélectionner ou tout désélectionner.

selectAll = function (event) {
        var self = this;
        $('.template-item-select').each(function () {
            this.checked = self.checked;
        });
    }
0
iberodev

Une petite amélioration à la solution @letiagoalves, si vos cases à cocher ont un traitement spécifique associé à un événement de clic. Pas demandé par l'OP, mais quelque chose que j'ai dû faire par le passé. Fondamentalement, au lieu de définir directement la propriété cochée de chaque case à cocher dépendante, elle compare l’état coché de chaque case à cocher dépendante à la case à cocher selectall et déclenche un événement de clic sur celles qui se trouvent dans l’état opposé.

$('#selectall').click(function () {
    var parentState = $(this).prop('checked');
    $('.selectedId').each(function() {
        if ($(this).prop('checked') !== parentState) {
            $(this).trigger("click");
        }
});
});

DEMO: https://jsfiddle.net/jajntuqb/2/

0
pierus

Solution plus spécifique:

$(document).ready(function(){
  $('#checkAll').on('click', function ( e ) {
    $('input[name="chck_box[]"]').prop('checked', $(this).is(':checked'));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <th><input type="checkbox" id="checkAll"></th>
    <th>Name</th>
    <th>Last</th>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" name="chck_box[]" value="1"></td>
      <td>Joe</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="chck_box[]" value="2"></td>
      <td>John</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="chck_box[]" value="3"></td>
      <td>Bill</td>
      <td>White</td>
    </tr>
  </tbody>
</table>

0
AndreX