false - jquery check desmarque todas las casillas de verificación con un botón

uncheck all checkbox jquery

Question

Estoy intentando marcar / desmarcar todas las casillas 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 del casillero principal cambiando 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 todo / desmarcar todo. Este es el código, ¿alguien puede ajustar 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

Answer 1

Aquí hay un enlace, que se utiliza para marcar y desmarcar la casilla principal y todas las casillas secundarias se seleccionan y deseleccionan.

jquery check desmarque todas las casillas de verificación Uso de Jquery con demostración

$(function () {
        $("#select-all").on("click", function () {
            var all = $(this);
            $(''input:checkbox'').each(function () {
                $(this).prop("checked", all.prop("checked"));
            });
        });
    });

Answer 2

Auto-promoción desvergonzada: hay un plugin de 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

Answer 3

El código a continuación funcionará si el usuario selecciona todas las casillas de verificación, luego marca la casilla de verificación de todas las casillas de verificación y si el usuario deselecciona una de las casillas de verificación, la opción marcar todas se desactivará.

$("#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

Answer 4

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

Answer 5

Estoy de acuerdo con la respuesta corta de Richard Garside, pero en lugar de usar prop() en $(this).prop("checked") puede usar la propiedad de checkbox de JS nativa, 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>

Answer 6

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

Answer 7

Marque Todo con desmarcar / verificar controlador si todos los artículos son / isnt marcados

JS:

e = checkbox id t = checkbox (item) class n = checkbox verifique 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:

Marque TODA la clase 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>

Answer 8

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

DEMO

Answer 9

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

DEMO

Answer 10

Prueba esto:

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

e es el evento generado al hacer click , y e.target es el elemento al que se hace clic ( .checkAll ), por lo que solo debe poner la propiedad checked de los elementos con la clase .cb-element como la del elemento con la clase .checkAll`.

PD: ¡Disculpe mi mal inglés!

Answer 11

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

También hay otra forma corta de hacerlo, consulte el siguiente ejemplo. En este ejemplo, marque / desmarque toda casilla de verificación está marcada o no, si está marcada, todas se verificarán y, si no, se desmarcarán todas.

$("#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>

Answer 12

Puedes usar esto. this.checked para 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'')
});

$(''.checkAll'').change(function(){
    var state = this.checked;
    state? $('':checkbox'').prop(''checked'',true):$('':checkbox'').prop(''checked'',false);
    state? $(this).next(''b'').text(''Uncheck All'') :$(this).next(''b'').text(''Check All'')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <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

Answer 13

Sé que esta pregunta es antigua, pero noté que la mayoría de la gente usa una casilla de verificación. La respuesta aceptada utiliza 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). Entonces 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 con el cambio de texto y los valores de la casilla de verificación. e.preventDefault() una llamada e.preventDefault() porque esto evitará que la página salte a la cima debido a la parte href="#" .

Answer 14

Solución para alternar casillas de verificación usando 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);
});

DEMO

Answer 15

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

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

Answer 16

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

Answer 17

prueba esto,

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

Answer 18

La mejor solución aquí Check 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

Answer 19

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

Answer 20

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

Answer 21

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