web-dev-qa-db-fra.com

cocher décocher toutes les cases avec une autre case à cocher utiliser jquery

J'utilise jquery-1.9.1.jsIn ma page html, cela fonctionne bien pour la première fois.

comme http://jsfiddle.net/pzCcE/1/

Quelqu'un peut-il m'aider à l'améliorer?

<table id="tab1">
    <input type="checkbox" name="checkAll" id="checkAll">全選
    <input type="checkbox" name="book" id="book" value="book1">book1
    <input type="checkbox" name="book" id="book" value="book2">book2
    <input type="checkbox" name="book" id="book" value="book3">book3
    <input type="checkbox" name="book" id="book" value="book4">book4
    <input type="checkbox" name="book" id="book" value="book5">book5</table>

$(function () {
    $("#tab1 #checkAll").click(function () {
        if ($("#tab1 #checkAll").is(':checked')) {
            $("#tab1 input[type=checkbox]").each(function () {
                $(this).attr("checked", true);
            });

        } else {
            $("#tab1 input[type=checkbox]").each(function () {
                $(this).attr("checked", false);
            });
        }
    });
});
jquerycheckbox
17
user2187325

Changement

$(this).attr("checked", true);

à

$(this).prop("checked", true);

Exemple jsFiddle

En fait, je viens de répondre à une autre question semblable à celle-ci. Par le .prop () docs:

La méthode .prop () est un moyen pratique de définir la valeur de propriétés - en particulier lors de la définition de plusieurs propriétés, à l'aide des valeurs retourné par une fonction, ou la définition de valeurs sur plusieurs éléments à une fois que. Il doit être utilisé lors de la sélection de selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked ou defaultSelected. Puisque jQuery 1.6, ces propriétés ne peuvent plus être définies avec le .attr () méthode. Ils n'ont pas d'attributs correspondants et ne sont que Propriétés.

Les propriétés affectent généralement l'état dynamique d'un élément DOM sans changer l'attribut HTML sérialisé. Les exemples incluent la valeur propriété des éléments d'entrée, la propriété désactivée des entrées et boutons, ou la propriété cochée d'une case à cocher. La méthode .prop () doit être utilisé pour définir désactivé et coché à la place de .attr () méthode. La méthode .val () doit être utilisée pour obtenir et définir valeur.

38
j08691

Vous devriez utiliser des classes avec le même nom, les ID DOIVENT être uniques!

<input type="checkbox" name="checkAll" id="checkAll">全選
<input type="checkbox" name="book" class="book" value="book1">book1
<input type="checkbox" name="book" class="book" value="book2">book2
<input type="checkbox" name="book" class="book" value="book3">book3
<input type="checkbox" name="book" class="book" value="book4">book4
<input type="checkbox" name="book" class="book" value="book5">book5</table>

$(function () {
    $("#checkAll").click(function () {
        if ($("#checkAll").is(':checked')) {
            $(".book").prop("checked", true);
        } else {
            $(".book").prop("checked", false);
        }
    });
});
9
tymeJV

Comme l'OP a besoin de cocher toutes les cases à cocher sur la base d'une autre case à cocher id=全選.

La solution fournie par @ j08691 ci-dessus est bonne, mais il lui manque une chose: la solution ne désactive pas la case à cocher id=全選 lorsque aucune autre case à cocher de la liste n'est cochée. 

Je propose donc une solution qui coche/décoche toutes les cases à cocher sur la base de la case à cocher id=全選 et si une autre case est décochée, la case id=全選 est décochée. Et si l'utilisateur clique manuellement sur toutes les autres cases à cocher, la case à cocher id=全選 doit également être cochée pour refléter la relation.

OP utilisant le même identifiant pour plusieurs cases à cocher, ce qui est contraire aux règles de DOM. Les identificateurs d'élément doivent être uniques dans l'ensemble du document.

Le code suivant couvre donc tous les aspects de ce type de scénario.

HTML

<table>
    <tr>
        <td>
        <input type="checkbox" name="checkAll" id="checkAll">全選 (ALL)
        <input type="checkbox" name="book" id="book_1" value="book1">book1
        <input type="checkbox" name="book" id="book_2" value="book2">book2
        <input type="checkbox" name="book" id="book_3" value="book3">book3
        <input type="checkbox" name="book" id="book_4" value="book4">book4
        <input type="checkbox" name="book" id="book_5" value="book5">book5
        </td>
     </tr>
</table>

JQuery

$(document).ready(function() {

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

    $("[id*=book_]").change(function () {
        if ($('input[id*=book_][type=checkbox]:checked').length == $('input[id*=book_][type=checkbox]').length) {
            $('#checkAll').prop('checked', true);
        } else {
            $('#checkAll').prop('checked', false);
        }
    });

});

Description du sélecteur d'attribut [nom * = "valeur"]

Sélectionne les éléments ayant l'attribut spécifié avec une valeur contenant une sous-chaîne donnée.

Donc, $('#checkAll') me renvoie uniquement la case à cocher parent, sur laquelle je coche/désélectionne toutes les cases à cocher.

Et $('[id$=book_]') me renvoie toutes les cases à cocher sauf la case à cocher parent (選). Ensuite, sur la base de la case à cocher parent, je coche/désactive toutes les autres cases à cocher.

Je vérifie également la longueur des cases à cocher autres que les cases parent (選). Si toutes les autres cases sont cochées, je coche la case parent (). C'est donc le moyen de vérifier toutes les conditions possibles et de ne manquer aucun scénario.

Démo fonctionnant avec JSFiddle ici.

3
Suhaib Janjua

le moyen le plus rapide. et sauver des lignes

   $(".ulPymnt input[type=checkbox]").each(function(){                
       $(this).prop("checked", !$(this).prop("checked"))                
   })
2
Hannes Ledl
`change click to ch  $("#checkAll").click(); to $("#checkAll").change();

> Blockquote

$(function () {
 $("#checkAll").change(function () {
  if ($("#checkAll").is(':checked')) {
   $(".book").prop("checked", true);
   } else {
   $(".book").prop("checked", false);
  }
 });
});`
0
azhar
$("input[name='select_all_photos']").click(function () {
        var checked = $(this).is(':checked');
        $("input[name^='delete_']").each(function () {
            $(this).prop("checked", checked);
        });
    });

Ne prenez pas la peine de faire une déclaration if.

0
Thomas Wood

Celui-ci fonctionne pour toutes les listes de cases à cocher . Il suffit d'ajouter "check-all" à l'entrée contrôlant cela, qui doit avoir le même nom

$(function() {
  $('.check-all').each(function(){
    var checkListName = $(this).attr('name');
    $(this).change(function(){
      //change all checkbox of the list checked status
      $('input[name="'+checkListName+'"]').prop('checked', $(this).prop('checked')); 
    });
    $('input[name="'+checkListName+'"]').change(function(){
      //change .check-all checkbox depending of the list checked status
      $('input[name="'+checkListName+'"].check-all').prop('checked', ($('input[name="'+checkListName+'"]:checked').not('.check-all').length == $('input[name="'+checkListName+'"]').not('.check-all').length));
    });
  });
});
0
Maxence Cupper

Avec la réponse de j08691 regarder dans la chose suivante aussi ..

Cela n'a aucun sens de créer un sélecteur comme #id #id car un ID doit être unique dans votre DOM par définition.

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

$("#tab1 .checkAll").click(function () {
0
sasi

Je viens de simplifier @ j08691 answer

$("#checkAll").click(function() {
      var allChecked = $(this);
      $("#tab1 input[type=checkbox]").each(function() {
        $(this).prop("checked", allChecked.is(':checked'));
      })
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tab1">
  <tr>
    <td>
      <input type="checkbox" name="checkAll" id="checkAll">Select all
      <input type="checkbox" name="book" id="book" value="book1">book1
      <input type="checkbox" name="book" id="book" value="book2">book2
      <input type="checkbox" name="book" id="book" value="book3">book3
    </td>
  </tr>
</table>

0
Didac Montero

Ajoutez ceci aussi .... POUR ..... si une case à cocher (id: book) est désélectionnée, la case à cocher principale (id: checkAll) sera désélectionnée

$("#tab1 #book").click(function () {
  if($('#book').is(':checked'))
  {
    $("#checkAll").prop("checked", false);        
  }
});
0
Thivya