jquery - disabled - Activar/desactivar casillas de verificación

jquery toggle checkbox

Question

Tengo los siguientes

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

Me gustaría que id="select-all-teammembers" cuando se haga clic para alternar entre marcados y no seleccionados. Ideas? ¿Que no son docenas de líneas de código?

Answer 1

Aquí hay otra manera que tú quieres.

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

Answer 2

Aquí hay una forma jQuery de cambiar las 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

Answer 3

Bueno, hay una manera más fácil.

Primero, asigne a sus casillas de verificación 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

Answer 4

Creo que es más simple simplemente disparar un clic:

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

Answer 5

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

Answer 6

El ajuste ''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'');

Answer 7

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 8

Este código activará la casilla de verificación al hacer clic en cualquier animador de interruptor de palanca utilizado en las plantillas web. Reemplace ".onoffswitch-label" como está disponible en su código. "casilla de verificación ID" 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 9

Este funciona muy bien para mí.

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

Answer 10

La casilla de verificación Check-all debe actualizarse bajo ciertas condiciones. Intente hacer clic en "# seleccionar todos los miembros del equipo", luego desmarque algunos elementos y haga clic nuevamente en seleccionar todos. Puedes ver la inconsistencia. Para evitarlo utiliza 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 del objeto DOM deben almacenarse en caché como se describe anteriormente.

Answer 11

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

Answer 12

Puedes escribir así también

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

Solo tiene que llamar a hacer clic en el evento de la casilla de verificación cuando el usuario haga clic en el botón con id ''# checkbox-toggle''.

Answer 13

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 atributos HTML "booleanos", por lo que generalmente se prefiere en esta situación.

Answer 14

Sé que esto es antiguo, pero la pregunta era un poco ambigua, ya que el cambio puede significar que cada casilla de verificación debe cambiar su estado, sea lo que sea. Si tiene 3 marcados y 2 sin marcar, entonces alternar haría que los primeros 3 no estén marcados y los 2 últimos marcados.

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

.each() usar .each() si realmente desea cambiar cada estado de casilla de verificación en lugar de hacerlos todos iguales, por ejemplo

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

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

Answer 15

Si desea alternar cada caja individualmente (o solo una caja funciona igual de bien):

Recomiendo usar .each (), ya que es fácil de modificar si quieres que sucedan cosas diferentes, y aún así es relativamente breve 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 cosas.

que yo sepa, element.checked siempre ha funcionado igual en todos los navegadores?

Answer 16

Suponiendo que es una imagen que tiene que cambiar 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 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

Utilice este plugin:

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

   }

Entonces

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

Answer 19

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 bella. 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
    })
})

Answer 20

simplemente puedes usar esto

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

Answer 21

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

Answer 22

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

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

Answer 23

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

;)