Configuración de casillas de verificación usando Jquery - javascript, jquery, casilla de verificación

Tengo una forma dinámica que tiene varias casillas de verificación. Quiero crear un método de "seleccionar todo" que, al hacer clic, marque automáticamente todas las casillas del formulario.

[x] select all //<input type="checkbox" id="select-all"> Select all

[] item 1 //<input type="checkbox" id="1" class="checkbox1" value="1">
[] item 2 //<input type="checkbox" id="2" class="checkbox1" value="2">

[submit]

Mi jQuery es la siguiente:

$(document).ready(function(){
$("#select-all").click(function() {
if (this.checked)
{
console.log("Check detected");

$(".checkbox1").each(function() {
console.log("Checking the item with value:" + this.value );
$(this).prop("checked", true);
console.log(this);

});

} else {
console.log("not checked");
}
});

});

Mi consola de salida:

> Check detected
> Checking the item with value:1
> <input type=​"checkbox" id=​"1" class=​"checkbox1" value=​"1">​
> Checking the item with value:2
> <input type=​"checkbox" id=​"2" class=​"checkbox1" value=​"2">​

Sin embargo, puedo recorrer cada elemento, no estoy seguro de cómo configurar la casilla de verificación como marcada.

La parte con la que estoy luchando es la configuración real del estado verificado, sé que necesito usar: .prop ("verificado", verdadero) sin embargo, ¿qué uso para el elemento real? $ (esto) obviamente no funciona ...

$(this).prop("checked", true);

Respuestas

Usa este código simple

$(".checkAll").change(function(){
$(".checkbox1").prop("checked", this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Check all</label>
<input type="checkbox" class="checkAll" />

<br/><br/>
<input type="checkbox" class="checkbox1" />
<input type="checkbox" class="checkbox1" />
<input type="checkbox" class="checkbox1" />
<input type="checkbox" class="checkbox1" />

Te refieres #select-all como (this.checked) , Debe referirse como $(this).

En segundo lugar puedes usar :comprobado para saber si está marcado o no.

En tercer lugar, no es necesario que repitas $(".checkbox1"). jquery coincidirá con todos los elementos y actualizará el atributo.

A continuación se muestra el fragmento que puede ser útil.

$(document).ready(function() {
$("#select-all").click(function() {
if ($(this).is(":checked")) {
console.log("Check detected");
$(".checkbox1").prop("checked", true)
} else {
$(".checkbox1").prop("checked", false)
}
});
// If select-all is selected and if one check box is unchecked ,
//then select-all will be unchecked
$(".checkbox1").click(function(event) {
if ($(this).is(":checked")) {
// #select-all must be checked when all checkbox are checked
} else {
if ($("#select-all").is(":checked")) {
$("#select-all").prop("checked", false)
}
}
})
});

JSFIDDLE

enlace de demostración

código js

$(".checkbox1").click(function(event) {
var _this = $(this);
if (!_this.prop("checked")) {
$("#select-all").prop("checked", false)
}
})

$("#select-all").click(function() {

var _this = $(this);
var _value = _this.prop("checked");
console.log("Check detected");

$(".checkbox1").each(function() {
console.log("Checking the item with value:" + this.value);
$(this).prop("checked", _value);
console.log(this);

});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="select-all"> Select all

<input type="checkbox" id="1" class="checkbox1" value="1">

<input type="checkbox" id="2" class="checkbox1" value="2">

Solo para responder esta pregunta. Probé las diversas soluciones ofrecidas y parecían no funcionar. Sin embargo, me di cuenta de que, debido al uso de Jquery Uniform, necesitaba agregar un bit adicional de código para que la pantalla funcionara correctamente:

Esta publicación fue útil

Gracias a todos los que se han tomado el tiempo de responder.

Mi código final:

$(document).ready(function(){
$("#select-all").click(function() {
if (this.checked)
{
$(".checkbox1").prop("checked", true);

} else {
$(".checkbox1").prop("checked", false);
}
$.uniform.update(".checkbox1");
});
});