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?

Un apprenti
la source

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.

Frédéric Hamidi
la source
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(); 

la source
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.

Normadize
la source
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'); 
        }
    );
});
kst
la source
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');
});                 
brûlures mates
la source
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);
}
Dblock247
la source
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;
});
Jack
la source
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();
Abdennour TOUMI
la source
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">
user1428592
la source
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.

Anatoly
la source
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

yardpenalty.com
la source
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?

MoonLite
la source
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;
    });
});

;)

GigolNet Guigolachvili
la source
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'.

Milan Malani
la source
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);
});
Hugo Dias
la source
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;
    });
});
Karol Gontarski
la source
1

Celui-ci fonctionne très bien pour moi.

   $("#checkall").click(function() {
       var fruits = $("input[name=fruits\\[\\]]");
        fruits.prop("checked", $(this).prop("checked"));
    });
sovantha
la source
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>

vsync
la source
1

vous pouvez simplement l'utiliser

$("#chkAll").on("click",function(){
    $("input[name=checkBoxName]").prop("checked",$(this).prop("checked"));
});
Fouad Mekkey
la source
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
    })
})
Arthur Sult
la source
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');
IPSingh
la source
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);
 }
});
Pranesh Janarthanan
la source
-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

ange
la source