Activar / desactivar casillas de verificación

Tengo lo siguiente:

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

Me gustaría hacer id="select-all-teammembers"clic para alternar entre marcado y no marcado. Ideas? que no son docenas de líneas de código?

Puedes escribir:

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

Antes de jQuery 1.6, cuando solo teníamos attr () y no prop () , solíamos escribir:

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

Pero prop()tiene una semántica mejor que attr()cuando se aplica a los atributos HTML "booleanos", por lo que generalmente se prefiere en esta situación.

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

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

Sé que esto es antiguo, pero la pregunta era un poco ambigua, ya que alternar puede significar que cada casilla de verificación debe alternar su estado, sea lo que sea. Si tiene 3 marcadas y 2 sin marcar, entonces alternar hará que las 3 primeras estén sin marcar y las 2 últimas marcadas.

Para eso, ninguna de las soluciones aquí funciona, ya que hacen que todas las casillas de verificación tengan el mismo estado, en lugar de alternar el estado de cada casilla de verificación. Hacer $(':checkbox').prop('checked')en muchas casillas de verificación devuelve el AND lógico entre todas .checkedlas propiedades binarias, es decir, si una de ellas no está marcada, el valor devuelto es false.

Debe usarlo .each()si desea alternar cada estado de casilla de verificación en lugar de hacer que todos sean iguales, por ejemplo

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

Tenga en cuenta que no necesita $(this)dentro del controlador ya que la .checkedpropiedad existe en todos los navegadores.

Aquí hay otra forma que quieras.

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

Creo que es más simple activar un clic:

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

La mejor manera en que puedo pensar.

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

o

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

o

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

Desde jQuery 1.6 puede usar .prop(function)para alternar el estado marcado de cada elemento encontrado:

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

Use este complemento:

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

   }

Entonces

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

Suponiendo que es una imagen que tiene que alternar la casilla de verificación, esto funciona para mí

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

Registro de todas las casillas de verificación debe ser actualizado en sí bajo ciertas condiciones. Intente hacer clic en '# select-all-teammembers', luego desmarque algunos elementos y haga clic en select-all nuevamente. Puedes ver inconsistencia. Para evitarlo usa el siguiente truco:

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

Por cierto, todas las casillas de verificación DOM-object deben almacenarse en caché como se describe anteriormente.

Aquí hay una forma de jQuery para alternar casillas de verificación sin tener que seleccionar una casilla de verificación con html5 y etiquetas:

 <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

si desea alternar cada cuadro individualmente (o solo un cuadro funciona igual de bien):

Recomiendo usar .each (), ya que es fácil de modificar si desea que sucedan cosas diferentes, y aún así es relativamente corto y fácil de leer.

p.ej :

// 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 una nota al margen ... no estoy seguro de por qué todos usan .attr () o .prop () para (des) verificar las cosas.

por lo que yo sé, element.checked siempre ha funcionado igual en todos los navegadores.

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

;)

Puedes escribir así también

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

Solo necesita llamar al evento de clic de la casilla de verificación cuando el usuario hace clic en el botón con la identificación '# checkbox-toggle'.

Un mejor enfoque y 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);
});

<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>

Tratar:

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

Este me funciona muy bien.

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

El ejemplo más básico sería:

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

simplemente puedes usar esto

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

en mi opinión, el hombre más adecuado que sugirió una variante normal es GigolNet Gigolashvili, pero quiero sugerir una variante aún más hermosa. Revisalo

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

Establecer 'marcado' o nulo en lugar de verdadero o falso respectivamente hará el trabajo.

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

Este código alternará la casilla de verificación al hacer clic en cualquier animador de interruptor de alternancia utilizado en las plantillas web. Reemplace ".onoffswitch-label" según esté disponible en su código. "checkboxID" es la casilla de verificación activada aquí.

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

Bueno, hay una manera más fácil

Primero, dale a tus casillas un ejemplo de clase 'id_chk'

Luego dentro de la casilla de verificación que controlará el estado de las casillas de verificación 'id_chk':

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

Eso es todo, espero que esto ayude