jQuery cochez décochez toutes les cases à cocher avec un bouton

J'essaie de cocher / décocher toutes les cases à cocher en utilisant jquery. Maintenant, en cochant / décochant la case à cocher parent, toutes les cases à cocher enfant sont sélectionnées / désélectionnées également avec le texte de la case à cocher parent changé 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 checkall / uncheckall. C'est le code, quelqu'un peut-il 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
132
demandé sur Tshepang 2011-03-08 09:14:13

21 réponses

Essayez celui-ci :

$(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');        
    })
})

DÉMO

201
répondu Prakash 2013-01-15 11:37:49

C'est le chemin le plus court que j'ai trouvé (a besoin de jQuery1.6+)

HTML: 

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

JS: 

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

J'utilise .accessoire comme .attr ne fonctionne pas pour les cases à cocher dans jQuery 1.6 + sauf si vous avez explicitement ajouté un attribut checked à 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>
95
répondu Richard Garside 2016-06-15 02:37:29

Essayez Celui-Ci:

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

DÉMO

17
répondu Rodgers 2012-04-13 14:06:54

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);
    }
});
13
répondu Crisalin Petrovschi 2011-12-10 14:28:47

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

DÉMO

4
répondu Michal R 2013-05-08 15:11:57

, Essayez ceci:

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

e événement est généré lorsque vous ne click, et e.target est l'élément cliqué (.checkAll), il vous suffit donc de mettre la propriété checked des éléments avec la classe .cb-element comme celle de l'élément avec la classe .checkAll'.

PS: excusez mon mauvais anglais!

4
répondu Ruben Perez 2017-12-04 06:50:20

La Meilleure Solution ici Vérifier Violon

$("#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
répondu Rupak Das 2015-05-29 11:33:54

Essayez ceci 

$(".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
    }
});
1
répondu naiquevin 2011-03-08 06:19:32

Auto-promotion sans vergogne: Il y a 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 vous avez terminé.

Http://jsfiddle.net/mattball/NrM2P

1
répondu Matt Ball 2012-08-17 00:05:27

Essayez ceci, 

<input type="checkbox" class="checkAll" onclick="$('input[type=checkbox][class=cb-element]').attr('checked',this.checked)">
1
répondu Kautil 2013-06-24 10:04:22

Vous pouvez utiliser this.checked pour vérifier l'état actuel de la case,

$('.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')
});


$('.checkAll').change(function(){
    var state = this.checked;
    state? $(':checkbox').prop('checked',true):$(':checkbox').prop('checked',false);
    state? $(this).next('b').text('Uncheck All') :$(this).next('b').text('Check All')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <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
1
répondu Shaunak D 2015-04-06 16:01:22

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 Démo

Il y a aussi un autre moyen court de le faire, exemple ci-dessous. Dans cet exemple, cocher / décocher toutes les cases à cocher est cochée ou non si cochée alors tout sera coché et si ce n'est pas tout sera décocher 

$("#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>
1
répondu Pankaj Makwana 2017-12-04 07:01:48

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. l'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 avec la modification des valeurs de texte et de case à cocher. J'ai inclus un appel e.preventDefault() car cela empêchera la page de sauter en haut en raison du href="#" partie.

0
répondu foochow 2013-06-05 22:49:08 
$(function () {
    $('input#check_all').change(function () {
        $("input[name='input_ids[]']").prop('checked', $(this).prop("checked"));
    });
});
0
répondu Rokibul Hasan 2015-02-09 07:54:36

Voici un lien, qui est utilisé pour cocher et décocher la case parent et toutes les cases enfants sont sélectionnées et désélectionnées.

JQuery cocher décochez toutes les cases à cocher en utilisant Jquery avec Démo

$(function () {
        $("#select-all").on("click", function () {
            var all = $(this);
            $('input:checkbox').each(function () {
                $(this).prop("checked", all.prop("checked"));
            });
        });
    });
0
répondu Bharath Kumaar 2015-04-29 10:34:13 
<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
répondu Bhushan Sangani 2015-11-16 14:00:42

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

$('input:checkbox').attr('checked',false);
0
répondu John 2016-09-05 08:21:47 
$(document).ready( function() {
        // Check All
        $('.checkall').click(function () {          
            $(":checkbox").attr("checked", true);
        });
        // Uncheck All
        $('.uncheckall').click(function () {            
            $(":checkbox").attr("checked", false);
        });
    });
0
répondu Vicky 2017-09-26 08:55:40

Le code ci-dessous fonctionnera si l'utilisateur sélectionne toutes les cases à cocher, puis cochez toutes les cases à cocher et si l'utilisateur désélectionne une case à cocher, alors cochez toutes les cases à cocher seront décochées.

$("#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
0
répondu Hussain 2017-12-26 11:02:22

D'Accord avec Richard Garside la réponse courte, mais au lieu d'utiliser prop() dans $(this).prop("checked") vous pouvez utiliser natif JS checked la propriété de case 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>
0
répondu Rohan Kumar 2018-02-06 04:20:03

Cochez tout avec uncheck / check controller si tous les éléments sont / ne sont pas cochés

JS:

E = checkbox id t = checkbox (item) classe n = checkbox cochez 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 toutes les classes controle: 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>
-1
répondu D4Y.be 2014-10-25 17:51:10