La bascule de Cases on/off

Vous pouvez écrire:

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

Avant de jQuery 1.6, quand nous avons seulement eu attr() et pas prop(), nous avons utilisé pour écrire:

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

Mais prop() a mieux sémantique que attr() lorsqu'il est appliqué à "boolean" attributs HTML, de sorte qu'il est préférable dans cette situation.

Je sais que c'est vieux, mais la question était un peu ambigu en ce qu' bascule peut signifier chaque case doit basculer son état, quelle qu'elle soit. Si vous avez 3 vérifié et à 2 pas cochée, puis basculement ferait les 3 premiers de manière incontrôlée, et les 2 derniers vérifié.

Pour qu'aucune des solutions ici, le travail qu'ils font toutes les cases ont le même état, plutôt que d'alterner chaque case de l'état. Faire $(':checkbox').prop('checked') sur plusieurs cases à cocher retourne le ET logique entre tous les .checked les propriétés binaires, c'est à dire si l'un d'entre eux n'est pas cochée, la valeur retournée est false.

Vous devez utiliser .each() si vous souhaitez activer chaque case de l'état plutôt que de les rendre tous égaux, par exemple

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

Notez que vous n'avez pas besoin $(this) à l'intérieur, le gestionnaire comme le .checked propriété existe dans tous les navigateurs.

Je pense que c'est plus simple pour déclencher un clic:

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

Utilisation de ce plugin :

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

   }

Puis

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

De supposer que c'est une image qui a pour basculer la case à cocher, cela fonctionne pour moi

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

Ici est un jQuery moyen d'alterner des cases à cocher, sans avoir à sélectionner une case à cocher avec html5 & é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

Vous pouvez écrire comme ça aussi

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

Juste besoin d'appeler cliquez sur l'événement de la case à cocher lorsque l'utilisateur clic sur le bouton avec l'id '#case-toggle'.

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

L'exemple le plus simple serait:

JS:

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

HTML:

<input type="checkbox">
<button>Toggle checkbox</button>

si vous voulez activer chaque zone individuellement (ou juste une boîte fonctionne tout aussi bien):

Je recommande d'utiliser .each() , comme il est facile à modifier si vous voulez des choses différentes à faire et encore 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();}  
});

sur une note de côté...
je ne sais pas pourquoi tout le monde utilise .attr() ou .prop() de (dé)vérifier les choses.

autant que je sache, élément.vérifié a toujours travaillé de la même dans tous les navigateurs?

Paramètre "cochées" ou la valeur null au lieu de vrai ou de faux, respectivement, vont faire le travail.

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

Eh bien, il est un moyen plus facile

Premier à Donner votre cases un exemple de classe 'id_chk'

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

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

C'est tout, espérons que cette aide