jquery seleccione todas las casillas de verificación

Question

Tengo una serie de casillas de verificación que se cargan 100 a la vez a través de ajax.

Necesito este jquery para permitirme tener un botón cuando lo presiono revisar todo en la pantalla. Si hay más carga, y el botón está presionado, para alternar entre todos, luego presione de nuevo para volver a encender todo.

Esto es lo que tengo, obviamente no funciona para mí.

$(function() { 
$('#selectall').click(function() { 
    $('#friendslist').find(':checkbox').attr('checked', this.checked); 
}); 
}); 

El botón es #selectall, las casillas de verificación son de clase .tf, y todos ellos residen en un div padre llamado #check, dentro de un div llamado #friend, dentro de un div llamado #friendslist

Ejemplo:

<div id='friendslist'> 
    <div id='friend'> 
     <div id='check'> 
      <input type='checkbox' class='tf' name='hurr' value='durr1'> 
     </div> 
    </div> 
    <div id='friend'> 
     <div id='check'> 
      <input type='checkbox' class='tf' name='hurr' value='durr2'> 
     </div> 
    </div> 
    <div id='friend'> 
     <div id='check'> 
      <input type='checkbox' class='tf' name='hurr' value='durr3'> 
     </div> 
    </div> 
</div> 

<input type='button' id='selectall' value="Select All"> 

Answer 1

Sé que estoy revisando un viejo hilo, pero esta página se muestra como uno de los mejores resultados en Google cuando se hizo esta pregunta. Estoy revisando esto porque en jQuery 1.6 y superior, prop() debe usarse para el estado "comprobado" en lugar de attr() con verdadero o falso. Más información here.

Por ejemplo, el código de Henrick ahora debería ser:

$(function() { 
    $('#selectall').toggle(
     function() { 
      $('#friendslist .tf').prop('checked', true); 
     }, 
     function() { 
      $('#friendslist .tf').prop('checked', false); 
     } 
    ); 
}); 

Answer 2

$('#friendslist .tf') 

este selector se ajustará a sus necesidades

Answer 3

tal vez intente esto:

$(function() { 
    $('#selectall').click(function() { 
     $('#friendslist .tf').attr('checked', this.checked); 
    }); 
}); 

Answer 4

Así "marcados" está un atributo de mierda; en muchos navegadores no funciona como se esperaba :-(trate de hacer:

$('#friendslist').find(':checkbox') 
    .attr('checked', this.checked) 
    .attr('defaultChecked', this.checked); 

Sé que el ajuste "defaultChecked" no tiene ningún sentido, pero probarlo y ver si ayuda

Answer 5

uso. la función de palanca jQuery. a continuación, también puede realizar cualquier otro cambio que puede querer hacer con esos cambios ... como cambiar el valor del botón que dice "probando todos" o "Desactivar todo".

$(function() { 
    $('#selectall').toggle(
     function() { 
      $('#friendslist .tf').attr('checked', 'checked'); 
     }, 
     function() { 
      $('#friendslist .tf').attr('checked', ''); 
     } 
    ); 
}); 

Answer 6

Funciona para mí (IE, Safari, Firefox) simplemente cambiando su this.checked a 'checked'.

$(function() { 
    $('#selectall').click(function() { 
    $('#friendslist').find(':checkbox').attr('checked', 'checked'); 
    }); 
}); 

Answer 7

Usted puede intentar esto:

$(function() { 
$('#selectall').click(function() { 
    $('#friendslist input:checkbox').attr('checked', checked_status); 
}); 
}); 

// checked_status = verdadero/falso -como el caso, o se establece a través de una variable

Answer 8

asumiendo #selectall es una casilla de verificación en sí, cuya indicar que desea copiar a todas las otras casillas de verificación?

$(function() { 
$('#selectall').click(function() { 
    $('#friendslist input:checkbox').attr('checked', $(this).attr('checked')); 
}); 
}); 

Answer 9

probar esto

var checkAll = function(){ 
var check_all = arguments[0]; 
var child_class = arguments[1]; 
if(arguments.length>2){ 
    var uncheck_all = arguments[2]; 

    $('#'+check_all).click(function(){ 
     $('.'+child_class).attr('checked', true); 
    }); 

    $('#'+uncheck_all).click(function(){ 
     $('.'+child_class).attr('checked', false); 
    }); 

    $('.'+child_class).click(function(){ 
     var checkall_checked = true; 
     $('.'+child_class).each(function(){ 
      if($(this).attr('checked')!=true){ 
       checkall_checked = false; 
      } 
     }); 
     if(checkall_checked == true){ 
      $('#'+check_all).attr('checked', true); 
      $('#'+uncheck_all).attr('checked', false); 
     }else{ 
      $('#'+check_all).attr('checked', false); 
      $('#'+uncheck_all).attr('checked', true); 
     } 
    }); 
}else{ 
    $('#'+check_all).click(function(){ 
     $('.'+child_class).attr('checked', $(this).attr('checked')); 
    }); 

    $('.'+child_class).click(function(){ 
     var checkall_checked = true; 
     $('.'+child_class).each(function(){ 
      if($(this).attr('checked')!=true){ 
       checkall_checked = false;     
      } 
     }); 
     $('#'+check_all).attr('checked', checkall_checked); 
    }); 
} 
}; 

Para "marcar todas" y "desactive todos" es la misma casilla

checkAll ("checkall_id", "child_checkboxes_class_name");

Para "comprobar todos" y "desactive todos" es casilla de verificación separada

checkAll ("checkall_id", "child_checkboxes_class_name", "uncheckall_id");

Answer 10

Éste es cómo alternar casillas de verificación

$(document).ready(function() { 
    $('#Togglebutton').click(function() { 
     $('.checkBoxes').each(function() { 
      $(this).attr('checked',!$(this).attr('checked')); 
     }); 
    }); 
}); 

Answer 11

Aquí es cómo lo logré.

function SelectAllCheckBoxes(); 
{ 
$('#divSrchResults').find(':checkbox').attr('checked', $('#chkPrint').is(":checked")); 
} 

Lo siguiente activa la línea anterior.

<input type=checkbox id=chkPrint onclick='SelectAllCheckBoxes();' /> 

En el clic de chkPrint, cada casilla de la cuadrícula divSrchResults' es activar o desactivar la función del estado de chkPrint.

Por supuesto, si necesita funciones avanzadas como desmarcar la casilla de verificación titulada cuando se ha desmarcado cualquier otra casilla de verificación, debe escribir otra función para esto.

Answer 12

<input type="checkbox" onclick="toggleChecked(this.checked)"> Select/Deselect All 

Now here are two versions of the toggleChecked function dependent on the semantics of your document. The only real difference is the jQuery selector for your list checkboxes: 

1: All checkboxes have a class of “checkbox” (<input type=”checkbox” class=”checkbox” />) 
function toggleChecked(status) { 
$(".checkbox").each(function() { 
$(this).attr("checked",status); 
}) 
} 

2: All the checkboxes are contained within a div with an arbitary id: 

<div id="checkboxes"> 
<input type="checkbox" /> 
<input type="checkbox" /> 
<input type="checkbox" /> 
</div> 

In this case the function would look like this: 

function toggleChecked(status) { 
$("#checkboxes input").each(function() { 
$(this).attr("checked",status); 
}) 

Have fun! 

Answer 13

<div class="control-group"> 
<input type="checkbox" class="selAllChksInGroup"> All 
<input type="checkbox" value="NE"> Nebraska 
<input type="checkbox" value="FL"> Florida 
</div> 


$(document).ready(function(){ 

$("input[type=checkbox].selAllChksInGroup").on("click.chkAll", function(event){ 
    $(this).parents('.control-group:eq(0)').find(':checkbox').prop('checked', this.checked); 
}); 

}); 

Answer 14

una comprobación muy simple/Deseleccionar todo ello sin la necesidad de bucle

<input type="checkbox" id="checkAll" /> Check/Uncheck All 

<input type="checkbox" class="chk" value="option1" /> Option 1 
<input type="checkbox" class="chk" value="option2" /> Option 2 
<input type="checkbox" class="chk" value="option3" /> Option 3 

Y el Javascript (jQuery) que representa el "indefinido" en la casilla de verificación valor

** ACTUALIZACIÓN - utilizando .prop() **

$("#checkAll").change(function(){ 
    var status = $(this).is(":checked") ? true : false; 
    $(".chk").prop("checked",status); 
}); 

---

** sugerencia anterior - no puede trabajar **

$("#checkAll").change(function(){ 
    var status = $(this).attr("checked") ? "checked" : false; 
    $(".chk").attr("checked",status); 
}); 

OR con la sugerencia de la siguiente post usando .prop() combinados en una sola línea

$("#checkAll").change(function(){ 
    $(".chk").attr("checked",$(this).prop("checked")); 
}); 

Answer 15

No pude hacer que este último ejemplo funcionara para mí.La forma correcta para consultar el estado de la casilla es aparentemente:

var status = $(this).prop("checked"); 

y no

var status = $(this).attr("checked") ? "checked" : false; 

que el anterior.

Ver jQuery receiving checkbox status

Answer 16

creé una función que utilizo en todos los proyectos. Esto es sólo el primer borrador, pero tal vez le ayudará:

Función:

function selectAll(wrapperAll, wrapperInputs) { 

    var selectAll = wrapperAll.find('input'); 
    var allInputs = wrapperInputs.find('input'); 

    console.log('Checked inputs = ' + allInputs.filter(':not(:checked)').length); 

    function checkitems(allInputs) { 
     //If all items checked 
     if (allInputs.filter(':not(:checked)').length === 0) { 
      console.log('Function: checkItems: All items checked'); 
      selectAll.attr('checked', true); 

     } else { 
      console.log('Function: checkItems: Else all items checked'); 
      selectAll.attr('checked', false); 
     } 
    } 

    checkitems(allInputs); 
    allInputs.on('change', function() { 
     checkitems(allInputs) 
    }); 

    selectAll.on('change', function() { 
     if (this.checked) { 
      console.log('This checkbox is checked'); 
      wrapperInputs.find(':checkbox').attr('checked', true); 

     } else { 
      console.log('This checkbox is NOT checked'); 
      wrapperInputs.find(':checkbox').attr('checked', false); 

     } 
    }); 

} 

acepta los 2 parámetros, donde las entradas están envueltos en y cand uso de esta manera:

$(function() { 

    var wrapperAll = $('.selectallinput'); 
    var wrapperInputs = $('.inputs'); 

    selectAll(wrapperAll, wrapperInputs); 
}); 

Ver demostración: http://jsfiddle.net/cHD9z/

Answer 17

Esto puede funcionar para ambos (comprobados y/o sin marcar) selectall situaciones:

$(document).ready(function(){ 
$('#selectall').click(function() { 
    $("#friendslist .tf").attr("checked",function(){return $(this).attr("checked") ? false : true;}); 
}); 
}); 

Answer 18

El currently accepted answer no funcionará para jQuery 1.9+. El aspecto de manejo de eventos de la función (bastante pesada) .toggle() sobrecargada se eliminó en esa versión, lo que significa que al intentar llamar al .toggle(function, function) simplemente se cambiará el estado de visualización de su elemento.

yo sugeriría hacer algo como esto en su lugar:

$(function() { 
    var selectAll = $('#selectall'); 
    selectAll.on('click', function(e) { 
     var checked = !(selectAll.data('checked') || false); 
     $('#friendslist .tf').prop('checked', checked); 
     selectAll.data('checked', checked); 
    }); 
}); 

que utiliza un controlador de eventos click regular, además de un atributo de datos para rastrear el estado "toggled" e invertir con cada clic.

Answer 19

Aquí hay un plugin jQuery básico que escribí que selecciona todas las casillas de verificación en la página, excepto el casillero/elemento que se usará para alternar. Esto, por supuesto, se podría modificar para que se adapte a sus necesidades:

(function($) { 
    // Checkbox toggle function for selecting all checkboxes on the page 
    $.fn.toggleCheckboxes = function() { 
     // Get all checkbox elements 
     checkboxes = $(':checkbox').not(this); 

     // Check if the checkboxes are checked/unchecked and if so uncheck/check them 
     if(this.is(':checked')) { 
      checkboxes.prop('checked', true); 
     } else { 
      checkboxes.prop('checked', false); 
     } 
    } 
}(jQuery)); 

Después, simplemente llamar a la función en su casilla de verificación o elemento de botón:

// Check all checkboxes 
$('.check-all').change(function() { 
    $(this).toggleCheckboxes(); 
}); 

Como se va a agregar y quitar más casillas de verificación a través de AJAX, Es posible que desee utilizar esto en lugar de .change():

// Check all checkboxes 
$(document).on('change', '.check-all', function() { 
    $(this).toggleCheckboxes(); 
});