Toggle Las casillas de verificación de encendido/apagado

Question

Tengo el siguiente:

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

Me gustaría que el id="select-all-teammembers" cuando se hace clic para cambiar entre activada y desactivada. Ideas? que no son docenas de líneas de código?

Answer 1

Se puede 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 sólo teníamos attr() y no prop(), hemos utilizado para escribir:

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

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

Answer 2

Aquí hay otra manera que usted desea.

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

Answer 3

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

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

Answer 4

Suponiendo que se trata de 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"> 

Answer 5

Sé que esto es viejo, pero la pregunta era un poco ambigua en la que de palanca puede significar que cada casilla de verificación debe alternar su estado, sea lo que sea. Si tiene 3 marcados y 2 desmarcados, alternar los 3 primeros sin marcar y los 2 últimos marcados.

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. Al hacer $(':checkbox').prop('checked') en muchas casillas, se devuelve el AND lógico entre todas las propiedades binarias .checked, es decir, si una de ellas está desmarcada, el valor devuelto es false.

Debe usar .each() si realmente desea alternar cada estado de casilla de verificación en lugar de hacer que todos sean iguales, p. Ej.

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

Tenga en cuenta que no es necesario $(this) dentro del controlador como la propiedad existe .checked en todos los navegadores.

Answer 6

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>

Answer 7

Creo que es más fácil de simplemente disparar un clic:

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

Answer 8

si desea alternar cada caja individual (o sólo uno la caja funciona igual de bien):

Recomiendo usar .each(), ya que es fácil de modificar si quieres cosas diferentes h appen, y aún 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 ... no está seguro de por qué todo el mundo utiliza.attr() o .prop() para (un) verificar cosas.

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

Answer 9

Bueno hay una manera más fácil

Primera Dé a sus casillas de verificación de un ejemplo de la clase 'id_chk'

A continuación, en el interior del wich casilla controlará casillas de verificación 'id_chk' estado ponen:

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

Eso es todo, espero que esto ayude

Answer 10

Utilice este complemento:

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

    } 

Entonces

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

Answer 11

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

;)

Answer 12

Registro de toda la casilla de verificación deben actualizarse sí bajo ciertas condiciones. Intente hacer clic en '# select-all-teammembers', desmarque algunos elementos y haga clic en seleccionar-todo de nuevo. Puedes ver inconsistencia. Para evitar que se utilice 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 DOM-objeto debe almacenar en caché como se describió anteriormente.

Answer 13

en mi conjetura, el hombre más correcto que sugirió la variante normal es GigolNet Gigolashvili, pero quiero sugerir una variante aún más hermosa. Compruebe que

Answer 14

Setting 'controlada' o nulo en lugar de verdadero o falso, respectivamente va a hacer el trabajo.

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

Answer 15

Desde jQuery 1.6 se puede utilizar .prop(function) para cambiar el estado de activación de cada elemento encontrado:

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

Answer 16

Usted puede escribir como esto también

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

Sólo hay que llamar haga clic en evento de la casilla de verificación cuando el usuario haga clic en el botón con id '# checkbox-toggle'.

Answer 17

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

Answer 18

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

Probar:

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

Answer 19

Esta funciona muy bien para mí.

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

Answer 20

Este código activa o desactiva la casilla de verificación al hacer clic en cualquier animador de conmutador utilizado en las plantillas web. Reemplace ".onoffswitch-label" como 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); 
} 
}); 

Answer 21

Aquí es una manera de jQuery para alternar casillas de verificación sin tener que seleccionar una casilla de verificación con HTML5 & 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

Answer 22

La mejor manera que puedo imaginar.

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

Answer 23

simplemente se puede utilizar este

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