Définition de cases à cocher à l'aide de Jquery - javascript, jquery, checkbox

J'ai un formulaire dynamique qui contient un certain nombre de cases à cocher. Je veux créer une méthode «sélectionner tout» qui, lorsque vous cliquez dessus, vérifie automatiquement toutes les cases du formulaire.

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

Mon jQuery est comme suit:

$(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");
}
});

});

Sortie de ma console:

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

Je peux parcourir chaque élément, mais je ne sais pas comment définir la case à cocher.

La partie avec laquelle je me bats est le réglage réel de l'état vérifié, je sais que je dois utiliser: .prop ("vérifié", vrai) cependant, que dois-je utiliser pour l'élément réel? $ (ceci) ne fonctionne évidemment pas ...

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

Réponses:

Utilisez ce code 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" />

Vous faites référence #select-all comme (this.checked) , Vous devez vous référer à $(this).

Deuxièmement, vous pouvez utiliser :vérifié pour savoir si elle est cochée ou non.

Troisièmement, vous n'avez pas besoin de boucler $(".checkbox1"). jquery correspondra à tous les éléments et mettra à jour l'attribut.

Voici l'extrait de code qui peut être utile

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

lien de démonstration

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

Juste pour répondre à cette question. J'ai essayé les différentes solutions proposées et elles semblaient ne pas fonctionner. Cependant, j'ai alors réalisé qu'en raison de l'utilisation de Jquery Uniform, je devais ajouter un peu de code supplémentaire pour que l'affichage fonctionne correctement:

Ce post était utile.

Merci à tous ceux qui ont pris le temps de répondre.

Mon code final:

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

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