¿Cómo activo / desactivo todas las casillas de verificación con un botón usando jQuery?


158

Estoy tratando de marcar / desmarcar todas las casillas de verificación usando jQuery. Ahora, al marcar / desmarcar la casilla de verificación principal, todas las casillas de verificación secundarias se seleccionan / deseleccionan también con el texto de la casilla de verificación principal que se cambia a checkall / uncheckall.

Ahora quiero reemplazar la casilla de verificación principal con un botón de entrada y cambiar el texto también en el botón para marcar / desmarcar. Existe el código, ¿alguien puede modificar el código?

    $( function() {
        $( '.checkAll' ).live( 'change', function() {
            $( '.cb-element' ).attr( 'checked', $( this ).is( ':checked' ) ? 'checked' : '' );
            $( this ).next().text( $( this ).is( ':checked' ) ? 'Uncheck All' : 'Check All' );
        });
        $( '.cb-element' ).live( 'change', function() {
            $( '.cb-element' ).length == $( '.cb-element:checked' ).length ? $( '.checkAll' ).attr( 'checked', 'checked' ).next().text( 'Uncheck All' ) : $( '.checkAll' ).attr( 'checked', '' ).next().text( 'Check All' );

        });
    });


   <input type="checkbox" class="checkAll" /> <b>Check All</b>

   <input type="checkbox" class="cb-element" /> Checkbox  1
   <input type="checkbox" class="cb-element" /> Checkbox  2
   <input type="checkbox" class="cb-element" /> Checkbox  3


Consulte el tutorial con jQuery freakyjolly.com/…
Code Spy el

Respuestas:


228

Prueba este:

$(document).ready(function(){
    $('.check:button').toggle(function(){
        $('input:checkbox').attr('checked','checked');
        $(this).val('uncheck all');
    },function(){
        $('input:checkbox').removeAttr('checked');
        $(this).val('check all');        
    })
})

MANIFESTACIÓN


66
-1 como alternar no está diseñado para trabajar así: api.jquery.com/toggle (al menos la versión actual)
estani

2
Solo funciona para un botón, si necesita varios, es mejor usarlo.click()
foochow

55
Aviso: esta respuesta marca literalmente cada casilla de verificación en su formulario. Salta a menos que quieras eso. Para múltiples comprobaciones, esta respuesta me ayudó: stackoverflow.com/a/27148382/3448554
Kelsey Hannan

1
Intenté este código, pero ¿por qué mi casilla de verificación desaparece? xD y tiene una propiedad "display: none" en él
melvnberd

10
Con las versiones más recientes de jQuery, .attr()y removeAttr()no debe usarse con el atributo "marcado". Como removeAttr()eliminará el atributo en lugar de establecerlo en false. .prop('checked', true)o .prop('checked', false)debería usarse en su lugar, como se explica en la respuesta @ richard-garside.
David Torres

110

Esta es la forma más corta que he encontrado (necesita jQuery1.6 +)

HTML:

<input type="checkbox" id="checkAll"/>

JS:

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

Estoy usando .prop ya que .attr no funciona para casillas de verificación en jQuery 1.6+ a menos que haya agregado explícitamente un atributo marcado a su etiqueta de entrada.

Ejemplo-

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="#">
    <p><label><input type="checkbox" id="checkAll"/> Check all</label></p>
    
    <fieldset>
        <legend>Loads of checkboxes</legend>
        <p><label><input type="checkbox" /> Option 1</label></p>
        <p><label><input type="checkbox" /> Option 2</label></p>
        <p><label><input type="checkbox" /> Option 3</label></p>
        <p><label><input type="checkbox" /> Option 4</label></p>
    </fieldset>
</form>


¿Cómo usas este? ¿Alguna posibilidad de ver un violín?
Drewdavid

1
Respuesta simple, pero OP quería un botón
vphilipnyc

¿Cómo "deseleccionas todo" de esta manera?
Michal Skop el

@MichalSkop Este código selecciona o deselecciona en función de si #checkAll está marcado o no. Si desea desmarcar todo, puede usar el valor falso como este $ ("input: checkbox"). Prop ('marcado', falso);
Richard Garside

Gracias muy facil!
viniciussvl

17

Prueba este:

HTML

<input type="checkbox" name="all" id="checkall" />

JavaScript

$('#checkall:checkbox').change(function () {
   if($(this).attr("checked")) $('input:checkbox').attr('checked','checked');
   else $('input:checkbox').removeAttr('checked');
});​

MANIFESTACIÓN


Sí, gracias este código perfecto, incluso si cambia de DOM LEVEL. Me han tratado de codificar, pero incluso he probado otros complementos que tampoco funcionan ... Este es perfecto.
Rafee

14

HTML

<input type="checkbox" name="select_all" id="select_all" class="checkAll" />

Javascript

    $('.checkAll').click(function(){
    if($(this).attr('checked')){
        $('input:checkbox').attr('checked',true);
    }
    else{
        $('input:checkbox').attr('checked',false);
    }
});

66
Use .prop en lugar de .attr si está usando jQuery1.6 +
Richard Garside

5

Solución para alternar casillas de verificación con un botón, compatible con jQuery 1.9+ donde toogle-event ya no está disponible :

$('.check:button').click(function(){
      var checked = !$(this).data('checked');
      $('input:checkbox').prop('checked', checked);
      $(this).val(checked ? 'uncheck all' : 'check all' )
      $(this).data('checked', checked);
});

MANIFESTACIÓN


Reemplacé el botón con una casilla de verificación y "input: checkbox" con una clase, para mi propósito, ¡y funcionó muy bien!
RationalRabbit

5

Prueba esto:

$('.checkAll').on('click', function(e) {
     $('.cb-element').prop('checked', $(e.target).prop('checked'));
});

ees el evento generado cuando lo haces click, y e.targetes el elemento en el que se hace clic ( .checkAll), por lo que solo tienes que poner la propiedad checkedde elementos con clase .cb-elementcomo la del elemento con clase .checkAll`.

PD: ¡Disculpe mi mal inglés!


1
Hola Ruben, deberías agregar un comentario a tu respuesta para que el OP pueda entender cómo resolviste ese problema exactamente
edi9999

Gracias por su ayuda @ edi9999, soy un principiante
Ruben Perez

1
Esta respuesta es mejor IMO ya que la respuesta aceptada marcará todas las casillas de verificación en su formulario , mientras que su patrón le permite orientar fácilmente diferentes elementos HTML de formulario $ ("# id") o $ (". Class") a través de un patrón como $('#all_news_items').on('click', function(e) { $('.news-item-option').prop('checked', $(e.target).prop('checked')); }); sin el checkall funciones que interfieren con otros elementos de formulario, por lo que puede agregar un nuevo checkall fácilmente:$('#all_specializations').on('click', function(e) { $('.specialization-option').prop('checked', $(e.target).prop('checked')); });
Kelsey Hannan

4

Puedes probar esto

    $('.checkAll').on('click',function(){
        $('.checkboxes').prop('checked',$(this).prop("checked"));
    });`

Class .checkAlles una casilla de verificación que controla la acción masiva


3

Acordado con respuesta corta de Richard Garside, pero en lugar de utilizar prop()en la $(this).prop("checked")que se puede utilizar nativa JS checkedpropiedad de la casilla de verificación como,

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="#">
    <p><label><input type="checkbox" id="checkAll"/> Check all</label></p>
    
    <fieldset>
        <legend>Loads of checkboxes</legend>
        <p><label><input type="checkbox" /> Option 1</label></p>
        <p><label><input type="checkbox" /> Option 2</label></p>
        <p><label><input type="checkbox" /> Option 3</label></p>
        <p><label><input type="checkbox" /> Option 4</label></p>
    </fieldset>
</form>


3

Marque / Desmarque Todo con la propiedad Intermedia usando jQuery

Obtener elementos marcados en matriz utilizando el método getSelectedItems ()

Fuente Casilla de verificación Seleccionar / Deseleccionar todo con verificación maestra indeterminada

ingrese la descripción de la imagen aquí

HTML

<div class="container">
  <div class="card">
    <div class="card-header">
      <ul class="list-group list-group-flush">
        <li class="list-group-item">
          <input
            class="form-check-input"
            type="checkbox"
            value="selectAll"
            id="masterCheck"
          />
          <label class="form-check-label" for="masterCheck">
            Select / Unselect All
          </label>
        </li>
      </ul>
    </div>
    <div class="card-body">
      <ul class="list-group list-group-flush" id="list-wrapper">
        <li class="list-group-item">
          <input
            class="form-check-input"
            type="checkbox"
            value="item1"
            id="item1"
          />
          <label class="form-check-label" for="item1">
            Item 1
          </label>
        </li>
        <li class="list-group-item">
          <input
            class="form-check-input"
            type="checkbox"
            value="item2"
            id="item2"
          />
          <label class="form-check-label" for="item2">
            Item 2
          </label>
        </li>
        <li class="list-group-item">
          <input
            class="form-check-input"
            type="checkbox"
            value="item3"
            id="item3"
          />
          <label class="form-check-label" for="item3">
            Item 3
          </label>
        </li>
        <li class="list-group-item">
          <input
            class="form-check-input"
            type="checkbox"
            value="item4"
            id="item4"
          />
          <label class="form-check-label" for="item4">
            Item 4
          </label>
        </li>
        <li class="list-group-item">
          <input
            class="form-check-input"
            type="checkbox"
            value="item5"
            id="item5"
          />
          <label class="form-check-label" for="item5">
            Item 5
          </label>
        </li>
        <li class="list-group-item" id="selected-values"></li>
      </ul>
    </div>
  </div>
</div>

jQuery

  $(function() {
    // ID selector on Master Checkbox
    var masterCheck = $("#masterCheck");
    // ID selector on Items Container
    var listCheckItems = $("#list-wrapper :checkbox");

    // Click Event on Master Check
    masterCheck.on("click", function() {
      var isMasterChecked = $(this).is(":checked");
      listCheckItems.prop("checked", isMasterChecked);
      getSelectedItems();
    });

    // Change Event on each item checkbox
    listCheckItems.on("change", function() {
      // Total Checkboxes in list
      var totalItems = listCheckItems.length;
      // Total Checked Checkboxes in list
      var checkedItems = listCheckItems.filter(":checked").length;

      //If all are checked
      if (totalItems == checkedItems) {
        masterCheck.prop("indeterminate", false);
        masterCheck.prop("checked", true);
      }
      // Not all but only some are checked
      else if (checkedItems > 0 && checkedItems < totalItems) {
        masterCheck.prop("indeterminate", true);
      }
      //If none is checked
      else {
        masterCheck.prop("indeterminate", false);
        masterCheck.prop("checked", false);
      }
      getSelectedItems();
    });

    function getSelectedItems() {
      var getCheckedValues = [];
      getCheckedValues = [];
      listCheckItems.filter(":checked").each(function() {
        getCheckedValues.push($(this).val());
      });
      $("#selected-values").html(JSON.stringify(getCheckedValues));
    }
  });

2

La mejor solución aquí Compruebe Fiddle

$("#checkAll").change(function () {
    $("input:checkbox.cb-element").prop('checked', $(this).prop("checked"));
});
$(".cb-element").change(function () {
        _tot = $(".cb-element").length                        
        _tot_checked = $(".cb-element:checked").length;

        if(_tot != _tot_checked){
            $("#checkAll").prop('checked',false);
        }
});
<input type="checkbox" id="checkAll"/> ALL

<br />

<input type="checkbox" class="cb-element" /> Checkbox  1
<input type="checkbox" class="cb-element" /> Checkbox  2
<input type="checkbox" class="cb-element" /> Checkbox  3

2

El código a continuación funcionará si el usuario selecciona todas las casillas de verificación, luego marque todas las casillas de verificación y si el usuario desmarca cualquier casilla de verificación, marque todas las casillas de verificación.

$("#checkall").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

$(".cb-element").change(function () {
  if($(".cb-element").length==$(".cb-element:checked").length)
    $("#checkall").prop('checked', true);
  else
    $("#checkall").prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="all" id="checkall" />Check All</br>

<input type="checkbox" class="cb-element" /> Checkbox  1</br>
<input type="checkbox" class="cb-element" /> Checkbox  2</br>
<input type="checkbox" class="cb-element" /> Checkbox  3


1

prueba esto

$(".checkAll").click(function() {
    if("checkall" === $(this).val()) {
         $(".cb-element").attr('checked', true);
         $(this).val("uncheckall"); //change button text
    }
    else if("uncheckall" === $(this).val()) {
         $(".cb-element").attr('checked', false);
         $(this).val("checkall"); //change button text
    }
});

He probado tu guión, pero no tuve suerte. ¿Pueden ver esto si lo he implementado correctamente o no? Demostración
Ravi

1

Auto-promoción descarada: hay un complemento jQuery para eso .

HTML:

<form action="#" id="myform">
    <div><input type="checkbox" id="checkall"> <label for="checkall"> Check all</label></div>
    <fieldset id="slaves">
        <div><label><input type="checkbox"> Checkbox</label></div>
        <div><label><input type="checkbox"> Checkbox</label></div>
        <div><label><input type="checkbox"> Checkbox</label></div>
        <div><label><input type="checkbox"> Checkbox</label></div>
        <div><label><input type="checkbox"> Checkbox</label></div>
    </fieldset>
</form>

JS:

$('#checkall').checkAll('#slaves input:checkbox', {
    reportTo: function () {
        var prefix = this.prop('checked') ? 'un' : '';
        this.next().text(prefix + 'check all');
    }
});​

...y tu estas listo.

http://jsfiddle.net/mattball/NrM2P


1

prueba esto,

<input type="checkbox" class="checkAll" onclick="$('input[type=checkbox][class=cb-element]').attr('checked',this.checked)">

1

Puede usar this.checkedpara verificar el estado actual de la casilla de verificación,

$('.checkAll').change(function(){
    var state = this.checked; //checked ? - true else false

    state ? $(':checkbox').prop('checked',true) : $(':checkbox').prop('checked',false);

    //change text
    state ? $(this).next('b').text('Uncheck All') : $(this).next('b').text('Check All')
});


1

Pruebe el siguiente código para marcar / desmarcar todas las casillas de verificación

jQuery(document).ready(function() {
    $("#check_uncheck").change(function() {
        if ($("#check_uncheck:checked").length) {
            $(".checkboxes input:checkbox").prop("checked", true);
        } else {
            $(".checkboxes input:checkbox").prop("checked", false);
        }
    })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" name="check_uncheck" id="check_uncheck" /> Check All/Uncheck All
<br/>
<br/>
<div class="checkboxes">
    <input type="checkbox" name="check" id="check" /> Check Box 1
    <br/>
    <input type="checkbox" name="check" id="check" /> Check Box 2
    <br/>
    <input type="checkbox" name="check" id="check" /> Check Box 3
    <br/>
    <input type="checkbox" name="check" id="check" /> Check Box 4
</div>

Prueba este enlace de demostración

También hay otra forma corta de hacer esto, consulte el siguiente ejemplo. En este ejemplo, marque / desmarque todas las casillas de verificación está marcada o no si está marcada, todas se marcarán y, si no, todas estarán desmarcadas

$("#check_uncheck").change(function() {
    $(".checkboxes input:checkbox").prop("checked",$(this).is(':checked'));
})
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <input type="checkbox" name="check_uncheck" id="check_uncheck" /> Check All/Uncheck All
    <br/>
    <br/>
    <div class="checkboxes">
        <input type="checkbox" name="check" id="check" /> Check Box 1
        <br/>
        <input type="checkbox" name="check" id="check" /> Check Box 2
        <br/>
        <input type="checkbox" name="check" id="check" /> Check Box 3
        <br/>
        <input type="checkbox" name="check" id="check" /> Check Box 4
    </div>


0

Sé que esta pregunta es antigua, pero noté que la mayoría de las personas están usando una casilla de verificación. La respuesta aceptada usa un botón, pero no puede funcionar con varios botones (por ejemplo, uno en la parte superior de la página uno en la parte inferior). Así que aquí hay una modificación que hace ambas cosas.

HTML

<a href="#" class="check-box-machine my-button-style">Check All</a>

jQuery

var ischecked = false;
$(".check-box-machine").click(function(e) {
    e.preventDefault();
    if (ischecked == false) {
        $("input:checkbox").attr("checked","checked");
        $(".check-box-machine").html("Uncheck All");
        ischecked = true;
    } else {
        $("input:checkbox").removeAttr("checked");
        $(".check-box-machine").html("Check All");
        ischecked = false;
    }
});

Esto le permitirá tener tantos botones como desee al cambiar el texto y los valores de las casillas de verificación. Incluí una e.preventDefault()llamada porque esto evitará que la página salte a la parte superior debido a la href="#"parte.


0
$(function () {
    $('input#check_all').change(function () {
        $("input[name='input_ids[]']").prop('checked', $(this).prop("checked"));
    });
});

¿Podría editar una explicación de por qué este código responde a la pregunta? Se desaconsejan las respuestas de solo código, porque no enseñan la solución.
Scimonster


0
<script type="text/javascript">
    function myFunction(checked,total_boxes){ 
         for ( i=0 ; i < total_boxes ; i++ ){ 
           if (checked){   
             document.forms[0].checkBox[i].checked=true; 
            }else{  
             document.forms[0].checkBox[i].checked=false; 
            } 
        }   
    } 
</script>
    <body>
        <FORM> 
            <input type="checkbox" name="checkBox" >one<br> 
            <input type="checkbox" name="checkBox" >two<br> 
            <input type="checkbox" name="checkBox" >three<br> 
            <input type="checkbox" name="checkBox" >four<br> 
            <input type="checkbox" name="checkBox" >five<br> 
            <input type="checkbox" name="checkBox" >six<br> 
            <input type="checkbox" name="checkBox" >seven<br> 
            <input type="checkbox" name="checkBox" >eight<br> 
            <input type="checkbox" name="checkBox" >nine<br>
            <input type="checkbox" name="checkBox" >ten<br>  s
            <input type=button name="CheckAll" value="Select_All" onClick="myFunction(true,10)"> 
            <input type=button name="UnCheckAll" value="UnCheck All Boxes" onClick="myFunction(false,10)"> 
        </FORM> 
    </body>

0

agregue esto en su bloque de código, o incluso haga clic en su botón

$('input:checkbox').attr('checked',false);

0
$(document).ready( function() {
        // Check All
        $('.checkall').click(function () {          
            $(":checkbox").attr("checked", true);
        });
        // Uncheck All
        $('.uncheckall').click(function () {            
            $(":checkbox").attr("checked", false);
        });
    });

-1

Marque todo con desmarcar / verificar controlador si todos los elementos están / no están marcados

JS:

e = casilla de verificación id t = casilla de verificación (elemento) clase n = casilla de verificación marca toda la clase

function checkAll(e,t,n){jQuery("#"+e).click(function(e){if(this.checked){jQuery("."+t).each(function(){this.checked=true;jQuery("."+n).each(function(){this.checked=true})})}else{jQuery("."+t).each(function(){this.checked=false;jQuery("."+n).each(function(){this.checked=false})})}});jQuery("."+t).click(function(e){var r=jQuery("."+t).length;var i=0;var s=0;jQuery("."+t).each(function(){if(this.checked==true){i++}if(this.checked==false){s++}});if(r==i){jQuery("."+n).each(function(){this.checked=true})}if(i<r){jQuery("."+n).each(function(){this.checked=false})}})}

HTML:

Verifique TODAS las clases de control: chkall_ctrl

<input type="checkbox"name="chkall" id="chkall_up" class="chkall_ctrl"/>
<br/>
1.<input type="checkbox" value="1" class="chkall" name="chk[]" id="chk1"/><br/>
2.<input type="checkbox" value="2" class="chkall" name="chk[]" id="chk2"/><br/>
3.<input type="checkbox" value="3" class="chkall" name="chk[]" id="chk3"/><br/>
<br/>
<input type="checkbox"name="chkall" id="chkall_down" class="chkall_ctrl"/>

<script>
jQuery(document).ready(function($)
{
  checkAll('chkall_up','chkall','chkall_ctrl');
  checkAll('chkall_down','chkall','chkall_ctrl');
});
 </script>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.