Activer / désactiver les cases à cocher


397

J'ai ce qui suit:

$(document).ready(function()
{
    $("#select-all-teammembers").click(function() {
        $("input[name=recipients\\[\\]]").attr('checked', true);
    });                 
});

J'aimerais que id="select-all-teammembers"lorsque vous cliquez dessus, vous basculez entre coché et non coché. Des idées? ce ne sont pas des dizaines de lignes de code?

Réponses:


723

Tu peux écrire:

$(document).ready(function() {
    $("#select-all-teammembers").click(function() {
        var checkBoxes = $("input[name=recipients\\[\\]]");
        checkBoxes.prop("checked", !checkBoxes.prop("checked"));
    });                 
});

Avant jQuery 1.6, lorsque nous n'avions que attr () et non prop () , nous écrivions:

checkBoxes.attr("checked", !checkBoxes.attr("checked"));

Mais prop()a une meilleure sémantique que attr()lorsqu'elle est appliquée aux attributs HTML "booléens", elle est donc généralement préférée dans cette situation.


4
Cela peut devenir tangible car il base le statut sur le premier (donc si l'utilisateur vérifie le premier, puis utilise la bascule, il se désynchronisera). Légèrement modifié pour baser l'état sur la bascule, pas la première case à cocher de la liste: $ ("input [nom = destinataires \ [\]]"). Prop ("vérifié", $ (ceci) .prop (" vérifié"));
CookiesForDevo

6
L'utilisation de 'prop' fait également fonctionner Zepto. Sinon, il cochera la case, mais ne la décochera pas.
SimplGy

1
"prop" au lieu de "attr" a fait l'affaire: avec "attr" il bascule pendant un certain temps puis s'arrête, avec "prop" au lieu de cela il bascule comme prévu. +1 pour la mise à jour.
TechNyquist

11
$('input[type=checkbox]').trigger('click');mentionné par @ 2astalavista ci-dessous est plus succinct et déclenche également l'événement "change".
ici

1
pourriez-vous modifier votre réponse pour soutenir la réponse de @ CookiesForDevo
acquayefrank

213
//this toggles the checkbox, and fires its event if it has    

$('input[type=checkbox]').trigger('click'); 
//or
$('input[type=checkbox]').click(); 

Fonctionne en chrome 29 mais pas en FF 17.0.7, quelqu'un peut-il le confirmer?
Griddo

J'avais été la voie de changer la propriété depuis si longtemps. Pour moi, c'est une approche excellente et plus flexible pour cocher et décocher les éléments des cases à cocher.
Isioma Nnodum

Un événement indésirable est déclenché.
Jehong Ahn

Pour les cases à cocher, il est généralement plus judicieux de déclencher l'événement «changement», car ils pourraient être modifiés en cliquant sur une étiquette.
Peter Lenjo

61

Je sais que c'est vieux, mais la question était un peu ambiguë, car basculer peut signifier que chaque case à cocher devrait changer son état, quel qu'il soit. Si vous avez 3 cochés et 2 non cochés, le basculement rendrait les 3 premiers non cochés et les 2 derniers cochés.

Pour cela, aucune des solutions ne fonctionne ici car elles font que toutes les cases à cocher ont le même état, plutôt que de basculer l'état de chaque case à cocher. Faire $(':checkbox').prop('checked')sur de nombreuses cases à cocher renvoie le ET logique entre toutes .checkedles propriétés binaires, c'est-à-dire que si l'une d'entre elles n'est pas cochée, la valeur retournée est false.

Vous devez utiliser .each()si vous souhaitez réellement basculer chaque état de case à cocher plutôt que de les rendre tous égaux, par exemple

   $(':checkbox').each(function () { this.checked = !this.checked; });

Notez que vous n'avez pas besoin de l' $(this)intérieur du gestionnaire car la .checkedpropriété existe dans tous les navigateurs.


5
Oui, c'est la bonne réponse pour basculer l'état de toutes les cases à cocher!
Sydwell

1
Des ordres de grandeur plus rapides que de déclencher un clic avec jQuery lorsque vous avez beaucoup de cases à cocher.
Jeremy Cook

16

Voici une autre façon que vous souhaitez.

$(document).ready(function(){   
    $('#checkp').toggle(
        function () { 
            $('.check').attr('Checked','Checked'); 
        },
        function () { 
            $('.check').removeAttr('Checked'); 
        }
    );
});

9
Ce n'est pas basculer.
AgentFire

2
@kst - C'est une meilleure méthode $ ('input [name = destinataires \ [\]]'). toggle (this.checked); Oubliez les cours.
Davis

11

Je pense qu'il est plus simple de simplement déclencher un clic:

$("#select-all-teammembers").click(function() {
    $("input[name=recipients\\[\\]]").trigger('click');
});                 

9

La meilleure façon de penser.

$('#selectAll').change(function () {
    $('.reportCheckbox').prop('checked', this.checked);
});

ou

$checkBoxes = $(".checkBoxes");
$("#checkAll").change(function (e) {
    $checkBoxes.prop("checked", this.checked);
});   

ou

<input onchange="toggleAll(this)">
function toggleAll(sender) {
    $(".checkBoxes").prop("checked", sender.checked);
}

8

Depuis jQuery 1.6, vous pouvez utiliser .prop(function)pour basculer l'état vérifié de chaque élément trouvé:

$("input[name=recipients\\[\\]]").prop('checked', function(_, checked) {
    return !checked;
});

Excellente réponse. Vous arrive-t-il d'en savoir plus sur le passage du trait de soulignement comme premier paramètre? Où pourrais-je en savoir plus à ce sujet?
user1477388

1
Edit: Apparemment, c'est essentiellement un moyen de passer null stackoverflow.com/questions/11406823/…
user1477388

8

Utilisez ce plugin:

$.fn.toggleCheck  =function() {
       if(this.tagName === 'INPUT') {
           $(this).prop('checked', !($(this).is(':checked')));
       }

   }

alors

$('#myCheckBox').toggleCheck();

2

En supposant que c'est une image qui doit basculer la case à cocher, cela fonctionne pour moi

<img src="something.gif" onclick="$('#checkboxid').prop('checked', !($('#checkboxid').is(':checked')));">
<input type="checkbox" id="checkboxid">

4
Comme il s'agit de votre première réponse, réalisez qu'il est le plus souvent préférable de suivre le modèle utilisé par l'affiche dans la question - comme mettre le code jQuery dans le gestionnaire de document prêt et non en ligne dans le balisage. SI vous avez une raison de NE PAS le faire, ajoutez des explications sur pourquoi.
Mark Schultheiss

2

La case à cocher doit être mise à jour elle-même sous certaines conditions. Essayez de cliquer sur '# select-all-teammembers' puis décochez quelques éléments et cliquez à nouveau sur select-all. Vous pouvez voir une incohérence. Pour l'empêcher, utilisez l'astuce suivante:

  var checkBoxes = $('input[name=recipients\\[\\]]');
  $('#select-all-teammembers').click(function() {
    checkBoxes.prop("checked", !checkBoxes.prop("checked"));
    $(this).prop("checked", checkBoxes.is(':checked'));
  }); 

BTW toutes les cases à cocher DOM-objet doivent être mises en cache comme décrit ci-dessus.


2

Voici un moyen jQuery de basculer les cases à cocher sans avoir à sélectionner une case à cocher avec html5 et étiquettes:

 <div class="checkbox-list margin-auto">
    <label class="">Compare to Last Year</label><br>
    <label class="normal" for="01">
       <input id="01" type="checkbox" name="VIEW" value="01"> Retail units
    </label>
    <label class="normal" for="02">
          <input id="02" type="checkbox" name="VIEW" value="02">  Retail Dollars
    </label>
    <label class="normal" for="03">
          <input id="03" type="checkbox" name="VIEW" value="03">  GP Dollars
    </label>
    <label class="normal" for="04">
          <input id="04" type="checkbox" name="VIEW" value="04">  GP Percent
    </label>
</div>

  $("input[name='VIEW']:checkbox").change(function() {
    if($(this).is(':checked')) {  
         $("input[name='VIEW']:checkbox").prop("checked", false);
     $("input[name='VIEW']:checkbox").parent('.normal').removeClass("checked");
         $(this).prop("checked", true);
         $(this).parent('.normal').addClass('checked');
    }
    else{
         $("input[name='VIEW']").prop("checked", false);
         $("input[name='VIEW']").parent('.normal').removeClass('checked');
    }    
});

http://www.bootply.com/A4h6kAPshx


1

si vous souhaitez basculer chaque case individuellement (ou si une seule case fonctionne aussi bien):

Je recommande d'utiliser .each (), car il est facile à modifier si vous voulez que différentes choses se produisent, et toujours relativement court et facile à lire.

par exemple :

// toggle all checkboxes, not all at once but toggle each one for its own checked state:
$('input[type="checkbox"]').each(function(){ this.checked = ! this.checked });

// check al even boxes, uncheck all odd boxes:
$('input[type="checkbox"]').each(function(i,cb){ cb.checked = (i%2 == 0); });

// set all to checked = x and only trigger change if it actually changed:
x = true;
$('input[type="checkbox"]').each(function(){
    if(this.checked != x){ this.checked = x; $(this).change();}  
});

en passant ... je ne sais pas pourquoi tout le monde utilise .attr () ou .prop () pour (dé) vérifier les choses.

autant que je sache, element.checked a toujours fonctionné de la même manière dans tous les navigateurs?


1
jQuery("#checker").click(function(){
    jQuery("#mydiv :checkbox").each(function(){
        this.checked = true;
    });
});
jQuery("#dechecker").click(function(){
    jQuery("#mydiv :checkbox").each(function(){
        this.checked = false;
    });
});
jQuery("#checktoggler").click(function(){
    jQuery("#mydiv :checkbox").each(function(){
        this.checked = !this.checked;
    });
});

;)


1

Vous pouvez aussi écrire comme ça

$(function() {
    $("#checkbox-toggle").click(function() {
        $('input[type=checkbox][name=checkbox_id\\[\\]]').click();
    });
});

Il suffit d'appeler l'événement Click de la case à cocher lorsque l'utilisateur clique sur le bouton avec l'ID '# checkbox-toggle'.


1

Une meilleure approche et UX

$('.checkall').on('click', function() {
   var $checks  = $('checks');
   var $ckall = $(this);

    $.each($checks, function(){
        $(this).prop("checked", $ckall.prop('checked'));
    });
});

$('checks').on('click', function(e){
   $('.checkall').prop('checked', false);
});

1
<table class="table table-datatable table-bordered table-condensed table-striped table-hover table-responsive">
<thead>
    <tr>
        <th class="col-xs-1"><a class="select_all btn btn-xs btn-info"> Select All </a></th>
        <th class="col-xs-2">#ID</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><input type="checkbox" name="order333"/></td>
        <td>{{ order.id }}</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="order334"/></td>
        <td>{{ order.id }}</td>
    </tr>
</tbody>                  
</table>

Essayer:

$(".table-datatable .select_all").on('click', function () {
    $("input[name^='order']").prop('checked', function (i, val) {
        return !val;
    });
});

1

Celui-ci fonctionne très bien pour moi.

   $("#checkall").click(function() {
       var fruits = $("input[name=fruits\\[\\]]");
        fruits.prop("checked", $(this).prop("checked"));
    });

1
vous vous rendez compte que vous donnez à la propriété "vérifiée" exactement la même valeur qu'elle a déjà, non? n'est-ce pas un peu gênant? vous vouliez évidemment mettre un !signe avant.
vsync

1

L'exemple le plus élémentaire serait:

// get DOM elements
var checkbox = document.querySelector('input'),
    button = document.querySelector('button');

// bind "cilck" event on the button
button.addEventListener('click', toggleCheckbox);

// when clicking the button, toggle the checkbox
function toggleCheckbox(){
  checkbox.checked = !checkbox.checked;
};
<input type="checkbox">
<button>Toggle checkbox</button>


1

vous pouvez simplement l'utiliser

$("#chkAll").on("click",function(){
    $("input[name=checkBoxName]").prop("checked",$(this).prop("checked"));
});

0

à mon avis, l'homme le plus juste qui a suggéré une variante normale est GigolNet Gigolashvili, mais je veux suggérer une variante encore plus belle. Vérifie ça

$(document).on('click', '.fieldWrapper > label', function(event) {
    event.preventDefault()
    var n = $( event.target ).parent().find('input:checked').length
    var m = $( event.target ).parent().find('input').length
    x = n==m? false:true
    $( event.target ).parent().find('input').each(function (ind, el) {
        // $(el).attr('checked', 'checked');
        this.checked = x
    })
})

0

Définir «vérifié» ou null au lieu de vrai ou faux respectivement fera le travail.

// checkbox selection
var $chk=$(':checkbox');
$chk.prop('checked',$chk.is(':checked') ? null:'checked');

0

Ce code fera basculer la case à cocher en cliquant sur n'importe quel animateur de commutateur à bascule utilisé dans les modèles Web. Remplacez ".onoffswitch-label" comme disponible dans votre code. "checkboxID" est la case à cocher activée ici.

$('.onoffswitch-label').click(function () {
if ($('#checkboxID').prop('checked')) 
 {
   $('#checkboxID').prop('checked', false);
 }
else 
 {
   $('#checkboxID').prop('checked', true);
 }
});

-3

Eh bien, il existe un moyen plus simple

Donnez d'abord à vos cases à cocher un exemple de classe 'id_chk'

Puis à l'intérieur de la case à cocher qui contrôlera l'état des cases à cocher 'id_chk':

<input type='checkbox' onchange='js:jQuery(".id_chk").prop("checked", jQuery(this).prop("checked"))' />

C'est tout, j'espère que cela aide

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.