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

Question

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

Demandé el 30 de Août, 2013: Quand la question a-t-elle été
434052 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la 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/

Demandé el 30 de Août, 2013 par Ikac

Answer 1

5 Réponses

Answer 2

1voto

demenvil Points 910

    <p id="checkAll">Check All</p>
<hr />
<input type="checkbox" class="checkItem">Item 1
<input type="checkbox" class="checkItem">Item 2
<input type="checkbox" class="checkItem">Item3

Et jquery

$(document).on('click','#checkAll',function () {
     $('.checkItem').not(this).prop('checked', this.checked);
 });

Répondu el 21 de Juin, 2017 par demenvil (910 Points )

Answer 3

1voto

echo Points 850

Vous pouvez exécuter .prop() sur les résultats d'un sélecteur jQuery directement, même s'il renvoie plus d'un résultat. S

$("input[type='checkbox']").prop('checked', true)

Répondu el 30 de Octobre, 2017 par echo (850 Points )

Answer 4

1voto

Hoàng Vũ Tgtt Points 1308

Ma solution

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<lablel><input type="checkbox" name="chkSelectAll" class="checkAll" data-checkwhat="chkSelect">check all group 1</lablel>
<br>
<input class="chkSelect" type="checkbox" name="chkSelect[]" value="1">  value 1.1<br>
<input class="chkSelect" type="checkbox" name="chkSelect[]" value="2"> value 1.2<br>
<input class="chkSelect" type="checkbox" name="chkSelect[]" value="3">  value 1.2<br>
<br>
<br>
<lablel><input type="checkbox" name="chkSelectAll" class="checkAll" data-checkwhat="chkSelect2">check all group 1</lablel>
<br>
<input class="chkSelect2" type="checkbox" name="chkSelect[]" value="1"> value 2.1<br>
<input class="chkSelect2" type="checkbox" name="chkSelect[]" value="4">value 2.1<br>

Répondu el 26 de Avril, 2021 par Hoàng Vũ Tgtt (1308 Points )

Answer 5

0voto

PK-1825 Points 571

HTML

<HTML>
<HEAD>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
</HEAD>
<BODY>
    <H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
<tr>
    <th><input type="checkbox" id="selectall"/></th>
    <th>Cell phone</th>
    <th>Rating</th>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
    <td>BlackBerry Bold 9650</td>
    <td>2/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
    <td>Samsung Galaxy</td>
    <td>3.5/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
    <td>Droid X</td>
    <td>4.5/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
    <td>HTC Desire</td>
    <td>3/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
    <td>Apple iPhone 4</td>
    <td>5/5</td>
</tr>
</table>

</BODY>
</HTML>

Code jQuery

<SCRIPT language="javascript">
$(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");
        }

    });
});
</SCRIPT>

Voir la démo

Cliquez ici pour voir la démo

Répondu el 11 de Mai, 2016 par PK-1825 (571 Points )

Answer 6

0voto

phoenix Points 107

Utiliser .prop() pour obtenir la valeur d'une propriété

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

Répondu el 9 de Novembre, 2016 par phoenix (107 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: