¿Cómo marcar todas las casillas de verificación usando jQuery?


118

No soy un experto en jQuery pero he intentado crear un pequeño script para mi aplicación. Quiero marcar todas las casillas de verificación pero no funciona correctamente.

Primero intenté usarlo attry luego lo intenté con proppero estoy haciendo algo mal.

Probé esto primero:

$("#checkAll").change(function(){

  if (! $('input:checkbox').is('checked')) {
      $('input:checkbox').attr('checked','checked');
  } else {
      $('input:checkbox').removeAttr('checked');
  }       
});

Pero esto no funcionó.

Siguiente: Esto funcionó mejor que el código anterior

$("#checkAll").change(function(){

  if (! $('input:checkbox').is('checked')) {
      $('input:checkbox').prop('checked',true);
  } else {
      $('input:checkbox').prop('checked', false);
  }       
});

Ambos ejemplos no funcionan.

JSFiddle: http://jsfiddle.net/hhZfu/4/


posible duplicado de .prop () vs .attr ()
Liam


1
aquí hay un enlace a mi codepen que hace exactamente esto codepen.io/nickhq/pen/pZJVEr
Nixon Kosgei

Respuestas:


294

Necesita usar .prop () para establecer la propiedad marcada

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

Demostración: violín


1
Vaya, gracias por una respuesta rápida. Esto funciona bien, pero en mi aplicación tengo un cheque falso. cuando actualizo la página ctrl+ry hago clic en la casilla de verificación checkAll, no me marca todo. Después de eso, debo verificar nuevamente para tener éxito. Entonces, necesito hacer checkAlldoble clic en lo que no funciona con un solo clic (uno). Copio, pego ese código y hago la función checkAll()y en la casilla de verificación configuroonclick="return checkAll()"
Ivan

3
Si va a utilizar jQuery, utilice jQuery. No es una buena idea mezclar jQuery con Javascript en línea. Por ejemplo, esto es malo: <elementtag id="someID" onclick="javascript code here"--- En su lugar, use jQuery:$('#someID').click(function() { checkAll() });
cssyphus

4
¿Cuál es la diferencia entre tu publicación esta respuesta, por qué se usa not(this).prop?
Shaijut

1
@ArunPJohny, id debe ser único en una sola página, cómo podemos usar la misma función usando el ejemplo de clase jsfiddle.net/52uny55w
Krishna Jonnalagadda

@ArunPJohny, gracias por tu tiempo. Quiero aprender muchas cosas de ti en jquery, ¿puedes sugerirme en jquery?
Krishna Jonnalagadda

44

Simplemente use la checkedpropiedad de checkAlly use prop () en lugar de attr para la propiedad marcada

Demo en vivo

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

Use prop () en lugar de attr () para propiedades como check

A partir de jQuery 1.6, el método .attr () devuelve undefined para los atributos que no se han establecido. Para recuperar y cambiar las propiedades del DOM, como el estado marcado, seleccionado o deshabilitado de los elementos del formulario, use el método .prop ()

Tiene la misma identificación para las casillas de verificación y debe ser única . Es mejor que use alguna clase con las casillas de verificación dependientes para que no incluya las casillas de verificación que no desea. Como $('input:checkbox') seleccionará todas las casillas de verificación en la página. Si su página se amplía con nuevas casillas de verificación, también se seleccionarán / desmarcarán. Cuál podría no ser el comportamiento previsto.

Demo en vivo

$('#checkAll').click(function () {    
    $(':checkbox.checkItem').prop('checked', this.checked);    
});

41

Una solución completa está aquí.

$(document).ready(function() {
    $("#checkedAll").change(function() {
        if (this.checked) {
            $(".checkSingle").each(function() {
                this.checked=true;
            });
        } else {
            $(".checkSingle").each(function() {
                this.checked=false;
            });
        }
    });

    $(".checkSingle").click(function () {
        if ($(this).is(":checked")) {
            var isAllChecked = 0;

            $(".checkSingle").each(function() {
                if (!this.checked)
                    isAllChecked = 1;
            });

            if (isAllChecked == 0) {
                $("#checkedAll").prop("checked", true);
            }     
        }
        else {
            $("#checkedAll").prop("checked", false);
        }
    });
});

HTML debe ser:

Se seleccionará y deseleccionará la casilla de verificación única en las tres casillas de verificación marcadas.

<input type="checkbox" name="checkedAll" id="checkedAll" />

<input type="checkbox" name="checkAll" class="checkSingle" />
<input type="checkbox" name="checkAll" class="checkSingle" />
<input type="checkbox" name="checkAll" class="checkSingle" />

Espero que esto ayude a alguien como a mí.

JS Fiddle https://jsfiddle.net/52uny55w/


3
Me gusta esta solución, ya que si desmarca una de las casillas, la casilla "Marcar todo" también se desmarca. Del mismo modo, si marca manualmente todas las casillas correspondientes, la casilla "Marcar todo" también se marcará. ¡Esa es una excelente respuesta de la interfaz de usuario!
HPWD

Puede $("#checkedAll").changeacortar la función cambiándola a:var val = this.checked; $(".checkSingle").each( function() { this.checked=val; });
Gellie Ann

Además, creo que es mejor cambiar el nombre de la isAllCheckedvariable a isThereUncheckedo unCheckedpara que sea más descriptivo sobre para qué se utilizó la variable.
Gellie Ann

Tomé esta solución, esto es lo que estoy buscando gracias
Ajay Kumar

10

Creo que cuando el usuario selecciona todas las casillas de verificación manualmente, checkall debe marcarse automáticamente o el usuario desmarca una de ellas de todas las casillas de verificación seleccionadas y luego checkall debe desmarcarse automáticamente. aquí está mi código ..

$('#checkall').change(function () {
    $('.cb-element').prop('checked',this.checked);
});

$('.cb-element').change(function () {
 if ($('.cb-element:checked').length == $('.cb-element').length){
  $('#checkall').prop('checked',true);
 }
 else {
  $('#checkall').prop('checked',false);
 }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/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


¡Gracias! Prefiero esto porque después de que todas las casillas de verificación estén marcadas, cuando desmarquemos una de ellas, todas las casillas de verificación estarán desmarcadas.
Rizqi N. Assyaufi

7

¿Por qué no intentas esto (en la segunda línea donde 'formulario #' necesitas poner el selector adecuado de tu formulario html):

$('.checkAll').click(function(){
    $('form#myForm input:checkbox').each(function(){
        $(this).prop('checked',true);
   })               
});

$('.uncheckAll').click(function(){
    $('form#myForm input:checkbox').each(function(){
        $(this).prop('checked',false);
   })               
});

Tu html debería ser así:

<form id="myForm">
      <span class="checkAll">checkAll</span>
      <span class="uncheckAll">uncheckAll</span>
      <input type="checkbox" class="checkSingle"></input>
      ....
</form>

Espero que eso ayude.


5

HTML:

<p><input type="checkbox" id="parent" /> Check/Uncheck All</p>
<ul>
  <li>
    <input type="checkbox" class="child" /> Checkbox 1</li>
  <li>
    <input type="checkbox" class="child" /> Checkbox 2</li>
  <li>
    <input type="checkbox" class="child" /> Checkbox 3</li>
</ul>

jQuery:

$(document).ready(function() {
  $("#parent").click(function() {
    $(".child").prop("checked", this.checked);
  });

  $('.child').click(function() {
    if ($('.child:checked').length == $('.child').length) {
      $('#parent').prop('checked', true);
    } else {
      $('#parent').prop('checked', false);
    }
  });
});

Demostración: FIDDLE


4

La forma más sencilla que conozco:

$('input[type="checkbox"]').prop("checked", true);


2
$('#checkAll').on('change', function(){
    if($(this).attr('checked')){
        $('input[type=checkbox]').attr('checked',true);
    }
    else{
        $('input[type=checkbox]').removeAttr('checked');
    }
});

1

Una casilla de verificación para gobernarlos a todos

Para las personas que aún buscan un complemento para controlar las casillas de verificación a través de una que sea liviana, tenga soporte listo para usar para UniformJS e iCheck y se desmarque cuando al menos una de las casillas de verificación controladas no esté marcada (y se verifique cuando todas las casillas de verificación controladas están marcadas) curso) He creado un complemento jQuery checkAll .

No dude en consultar los ejemplos en la página de documentación .


Para este ejemplo de pregunta, todo lo que necesita hacer es:

$( "#checkAll" ).checkall({
    target: "input:checkbox"
});

¿No es claro y sencillo?


1
    <p id="checkAll">Check All</p>
<hr />
<input type="checkbox" class="checkItem">Item 1
<input type="checkbox" class="checkItem">Item 2
<input type="checkbox" class="checkItem">Item3

Y jquery

$(document).on('click','#checkAll',function () {
     $('.checkItem').not(this).prop('checked', this.checked);
 });

1

Puede ejecutar .prop()los resultados de un selector de jQuery directamente incluso si devuelve más de un resultado. Entonces:

$("input[type='checkbox']").prop('checked', true)


0

Por lo general, también desea que la casilla de verificación maestra esté desmarcada si al menos una casilla de verificación esclava está desmarcada y que se marque si todas las casillas de verificación esclavas están marcadas:

/**
 * Checks and unchecks checkbox-group with a master checkbox and slave checkboxes
 * @param masterId is the id of master checkbox
 * @param slaveName is the name of slave checkboxes
 */
function checkAll(masterId, slaveName) {
    $master = $('#' + masterId);
    $slave = $('input:checkbox[name=' + slaveName + ']');

    $master.click(function(){
        $slave.prop('checked', $(this).prop('checked'));
        $slave.trigger('change');
    });

    $slave.change(function() {
        if ($master.is(':checked') && $slave.not(':checked').length > 0) {
            $master.prop('checked', false);
        } else if ($master.not(':checked') && $slave.not(':checked').length == 0) {
        $master.prop('checked', 'checked');
    }
    });
}

Y si desea habilitar cualquier control (por ejemplo, un Remove Allbotón o un Add Somethingbotón), cuando al menos una casilla de verificación está marcada y deshabilitar cuando no hay ninguna casilla de verificación:

/**
 * Checks and unchecks checkbox-group with a master checkbox and slave checkboxes,
 * enables or disables a control when a checkbox is checked
 * @param masterId is the id of master checkbox
 * @param slaveName is the name of slave checkboxes
 */
function checkAllAndSwitchControl(masterId, slaveName, controlId) {
    $master = $('#' + masterId);
    $slave = $('input:checkbox[name=' + slaveName + ']');

    $master.click(function(){
        $slave.prop('checked', $(this).prop('checked'));
        $slave.trigger('change');
    });

    $slave.change(function() {
        switchControl(controlId, $slave.filter(':checked').length > 0);
        if ($master.is(':checked') && $slave.not(':checked').length > 0) {
            $master.prop('checked', false);
        } else if ($master.not(':checked') && $slave.not(':checked').length == 0) {
        $master.prop('checked', 'checked');
    }
    });
}

/**
 * Enables or disables a control
 * @param controlId is the control-id
 * @param enable is true, if control must be enabled, or false if not
 */
function switchControl(controlId, enable) {
    var $control = $('#' + controlId);
    if (enable) {
        $control.removeProp('disabled');
    } else {
        $control.prop('disabled', 'disabled');
    }
}

0

HTML

<HTML>
<HEAD>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
</HEAD>
<BODY>
    <H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
<tr>
    <th><input type="checkbox" id="selectall"/></th>
    <th>Cell phone</th>
    <th>Rating</th>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
    <td>BlackBerry Bold 9650</td>
    <td>2/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
    <td>Samsung Galaxy</td>
    <td>3.5/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
    <td>Droid X</td>
    <td>4.5/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
    <td>HTC Desire</td>
    <td>3/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
    <td>Apple iPhone 4</td>
    <td>5/5</td>
</tr>
</table>

</BODY>
</HTML>

Código jQuery

<SCRIPT language="javascript">
$(function(){

    // add multiple select / deselect functionality
    $("#selectall").click(function () {
          $('.case').attr('checked', this.checked);
    });

    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    $(".case").click(function(){

        if($(".case").length == $(".case:checked").length) {
            $("#selectall").attr("checked", "checked");
        } else {
            $("#selectall").removeAttr("checked");
        }

    });
});
</SCRIPT>

Ver demostración

Haga clic aquí para ver la demostración


0

use .prop () para obtener el valor de una propiedad

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

0

Sé que hay muchas respuestas publicadas aquí, pero me gustaría publicar esto para optimizar el código y podemos usarlo a nivel mundial.

hice lo mejor que pude

/*----------------------------------------
 *  Check and uncheck checkbox which will global
 *  Params : chk_all_id=id of main checkbox which use for check all dependant, chk_child_pattern=start pattern of the remain checkboxes 
 *  Developer Guidline : For to implement this function Developer need to just add this line inside checkbox {{ class="check_all" dependant-prefix-id="PATTERN_WHATEVER_U_WANT" }}
 ----------------------------------------*/
function checkUncheckAll(chk_all_cls,chiled_patter_key){
    if($("."+chk_all_cls).prop('checked') == true){
        $('input:checkbox[id^="'+chiled_patter_key+'"]').prop('checked', 'checked');
    }else{
        $('input:checkbox[id^="'+chiled_patter_key+'"]').removeProp('checked', 'checked');
    }        
}

if($(".check_all").get(0)){
    var chiled_patter_key = $(".check_all").attr('dependant-prefix-id');

    $(".check_all").on('change',function(){        
        checkUncheckAll('check_all',chiled_patter_key);
    });

    /*------------------------------------------------------
     * this will remain checkbox checked if already checked before ajax call! :)
     ------------------------------------------------------*/
    $(document).ajaxComplete(function() {
        checkUncheckAll('check_all',chiled_patter_key);
    });
}

¡Espero que esto sea de ayuda!


0
function checkAll(class_name) {
    $("." + class_name).each(function () { 
        if (this.checked == true) 
            this.checked = false; 
        else 
            this.checked = true; 
    }); 
}

0

checkall es la identificación de todo check box y cb-child es el nombre de cada casilla de verificación que se marcará y desmarcará depende del evento checkall click

$("#checkall").click(function () {
                        if(this.checked){
                            $("input[name='cb-child']").each(function (i, el) {
                                el.setAttribute("checked", "checked");
                                el.checked = true;
                                el.parentElement.className = "checked";

                            });
                        }else{
                            $("input[name='cb-child']").each(function (i, el) {
                                el.removeAttribute("checked");
                                el.parentElement.className = "";
                            });
                        }
                    });

0

* GUIÓN DE JAVA PARA SELECCIONAR TODAS LAS CASILLAS *

La mejor solución ... Pruébelo

<script type="text/javascript">
        function SelectAll(Id) {
            //get reference of GridView control
            var Grid = document.getElementById("<%= GridView1.ClientID %>");
            //variable to contain the cell of the Grid
            var cell;

            if (Grid.rows.length > 0) {
                //loop starts from 1. rows[0] points to the header.
                for (i = 1; i < grid.rows.length; i++) {
                    //get the reference of first column
                    cell = grid.rows[i].cells[0];

                    //loop according to the number of childNodes in the cell
                    for (j = 0; j < cell.childNodes.length; j++) {
                        //if childNode type is CheckBox                 
                        if (cell.childNodes[j].type == "checkbox") {
                            //Assign the Status of the Select All checkbox to the cell checkbox within the Grid
                            cell.childNodes[j].checked = document.getElementById(Id).checked;
                        }
                    }
                }
            }
        }
    </script>

-1

Puede usar el siguiente código simple:

function checkDelBoxes(pForm, boxName, parent)
{
    for (i = 0; i < pForm.elements.length; i++)
        if (pForm.elements[i].name == boxName)
            pForm.elements[i].checked = parent;
}

Ejemplo de uso:

<a href="javascript:;" onclick="javascript:checkDelBoxes($(this).closest('form').get(0), 'CheckBox[]', true);return false;"> Select All
</a>
<a href="javascript:;" onclick="javascript:checkDelBoxes($(this).closest('form').get(0), 'CheckBox[]', false);return false;"> Unselect All
</a>

-1
if(isAllChecked == 0)
{ 
    $("#select_all").prop("checked", true); 
}   

por favor cambie la línea anterior a

if(isAllChecked == 0)
{ 
    $("#checkedAll").prop("checked", true); 
}   

en la respuesta de SSR y funciona perfectamente Gracias


-1
if($('#chk_all').is(":checked"))
 {
    $('#'+id).attr('checked', true);
 }
else
 {
    $('#'+id).attr('checked', false);
 }  

Sería útil si explicaras la respuesta.
enkor

si marca la casilla de verificación, todas las casillas de verificación se verifican como ID y luego desmarcan la casilla de verificación y luego todas las casillas de verificación están desmarcadas
Dsu Menaria


-1

html:

    <div class="col-md-3 general-sidebar" id="CategoryGrid">
                                                    <h5>Category &amp; Sub Category <span style="color: red;">* </span></h5>
                                                    <div class="checkbox">
                                                        <label>
                                                            <input onclick="checkUncheckAll(this)" type="checkbox">
                                                            All
                                                        </label>
                                                    </div>
                                                <div class="checkbox"><label><input class="cat" type="checkbox" value="Quality">Quality</label></div>
<div class="checkbox"><label><input class="subcat" type="checkbox" value="Planning process and execution">Planning process and execution</label></div>

javascript:

function checkUncheckAll(ele) {
    if (ele.checked) {
        $('.cat').prop('checked', ele.checked);
        $('.subcat').prop('checked', ele.checked);
    }
    else {
        $('.cat').prop('checked', ele.checked);
        $('.subcat').prop('checked', ele.checked);
    }
}

-1
            <pre>
            <SCRIPT language="javascript">
            $(function(){
                // add multiple select / deselect functionality
                $("#selectall").click(function () {
                      $('.case').attr('checked', this.checked);
                });

                // if all checkbox are selected, check the selectall checkbox
                // and viceversa
                $(".case").click(function(){

                    if($(".case").length == $(".case:checked").length) {
                        $("#selectall").attr("checked", "checked");
                    } else {
                        $("#selectall").removeAttr("checked");
                    }

                });
            });
            </SCRIPT>
            <HTML>
            <HEAD>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
            <TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
            </HEAD>
            <BODY>
            <H2>Multiple Checkbox Select/Deselect - DEMO</H2>
            <table border="1">
              <tr>
                <th><input type="checkbox" id="selectall"/></th>
                <th>Cell phone</th>
                <th>Rating</th>
              </tr>
              <tr>
                <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
                <td>BlackBerry Bold 9650</td>
                <td>2/5</td>
              </tr>
              <tr>
                <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
                <td>Samsung Galaxy</td>
                <td>3.5/5</td>
              </tr>
              <tr>
                <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
                <td>Droid X</td>
                <td>4.5/5</td>
              </tr>
              <tr>
                <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
                <td>HTC Desire</td>
                <td>3/5</td>
              </tr>
              <tr>
                <td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
                <td>Apple iPhone 4</td>
                <td>5/5</td>
              </tr>
            </table>
            </BODY>
            </HTML>
            </pre>

error de script en el código. El script debe cargarse primero.
Satish Shetty

-1
function chek_al_indi(id)
{
    var k = id;
    var cnt_descriptiv_indictr = eval($('#cnt_descriptiv_indictr').val());
    var std_cnt = 10;

    if ($('#'+ k).is(":checked"))
    {
        for (var i = 1; i <= std_cnt; i++)  
        {
            $("#chk"+ k).attr('checked',true);  
            k = k + cnt_descriptiv_indictr;
        }
    }

    if ($('#'+ k).is(":not(:checked)"))
    {
        for (var i = 1; i <= std_cnt; i++)  
        {
            $("#chk"+ k).attr('checked',false);     
            k = k + cnt_descriptiv_indictr;
        }       
    }
}

¿Por qué la función larga?
Jimmy Obonyo Abor

-2

Clic de gatillo

$("#checkAll").click(function(){
    $('input:checkbox').click();
});

O

$("#checkAll").click(function(){
    $('input:checkbox').trigger('click');
});

O

$("#checkAll").click(function(){
    $('input:checkbox').prop('checked', this.checked);
});
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.