J'ai une table avec une colonne remplie de cases. En haut, j'aimerais avoir une seule case à cocher "Sélectionner toutes" qui cocher toutes les cases sur cette page.
Comment dois-je implémenter cela? J'utilise JQuery comme cadre JavaScript si cela compte.
8 Réponses :
jQuery ( édité pour basculer le chèque / décocher tout): la raison pour laquelle je devais faire un html: click () Ensuite, vérifiez que le statut coché est parce que si vous essayez de " bascule " une case à cocher, la case à cocher étant basculée ne conserve pas son statut vérifié. De cette façon, il conserve l'état de la vérification et bascule efficacement.
Ceux-ci ressemblent à des cases à cocher ASP.NET, pas ASP.NET-MVC. MVC utiliserait simplement des cases à cocher HTML régulières. Comment ça change de choses?
Avec cette solution, si l'utilisateur décochonne la case à cocher "Sélectionner tout", les cases restent cochées. Consultez ma réponse ci-dessous pour la jquy pour gérer la sélection et la désélectionner toutes les cases.
@kingnestor - ça ne changera rien. Utilisez vos cases à cocher standard et cela fonctionnera.
Vous devez créer un exemple basé sur le balisage de la table où la case à cocher Sélection est présente dans la ligne d'en-tête. Exemple actuel Le marquage est totalement différent de ce qui est répertorié dans la question.
De plus, vous utilisez «paragraphe» pour basculer alors que l'OP veut une case à cocher pour basculer l'état.
Bien que les réponses postées précédemment fonctionneront, vous passerez dans des problèmes si vous avez plusieurs cases à cocher sur une seule page.
Ce format fonctionnera quelles que soient: et le script ...
C'est bien plus jQuery que nécessaire. Le mien fonctionnera indépendamment du format tant que les sélecteurs appropriés sont ajoutés
@Jason: Je suis certainement d'accord pour que le même effet puisse être accompli avec moins de code, mais peu importe, la méthode indiquée dans ma réponse permettra à plusieurs ensembles de cases à cocher pour exister dans une seule page.
Marquage de modification légèrement de la réponse de marve (donnant une pièce d'identité à la table)
EDIT: Version mise à jour où la case "Selectallall" reflète correctement l'état des cases à cocher. Par exemple. Si vous sélectionnez toutes les cases à cocher manuellement, cocher Cochez la case Sélectionnera automatiquement. Essayez la démo de comprendre le comportement. code: Votre jQuery pourrait être aussi simple que ceci:
Même chose que mon commentaire ci-dessus ... Cela n'a pas fonctionné pour moi avant d'avoir mis un espace avant le sélecteur ": coché".
Ceci gardera toutes les cases à cocher individuelles de la même manière que "Vérifier tous" un
$(".class-on-my-checkboxes").click(function() {
if (!this.checked) {
$("#id-of-checkall-checkbox").attr('checked', false);
}
else if ($(".class-on-my-checkboxes").length == $(".class-on-my-checkboxes:checked").length) {
$("#id-of-checkall-checkbox").attr('checked', true);
}
});
Cela ressemble à l'autre si caisse ne fonctionne pas ... Il convient de définir la case à cocher à la coche sur TRUE lorsque toutes les cases de contrôle sont cochées. Des idées?
Je pense que je pensais que je le pensais ... Ajout d'un espace avant ": vérifié" et cela a fonctionné.
Essayez ceci pour la table HTML.
function checkAllVerifySelection() {
var flag = $('input[name=chkVerifySelection]').is(':checked');
if (flag) {
$(".VerifyStatus").each(function () {
$(this).attr('checked', true);
});
}
else {
$(".VerifyStatus").each(function () {
$(this).attr('checked', false);
});
}
return true;
}
Pour moi, la solution de Jeremy a principalement travaillé, dans la page _layout.cshtml (page maître) strong> p> dans une référence référencée forte> p> dans la page HTML (RAZOR) forte> p> .attr code> avec .prop code>. Sinon, une fois sur une case sur une case à cocher, il arrête de réagir à la case à cocher "Master". <table class="table">
<thead>
<tr>
<th><input id="chkAffectCheckboxGroup" type="checkbox" checked="checked" /></th>
<th>
@Html.DisplayNameFor(model => model.Clients[0].ClientId)
</th>
<th>
@Html.DisplayNameFor(model => model.Clients[0].Name)
</th>
</tr>
</thead>
<tbody>
@for (int i = 0; i < Model.Clients.Count(); i++)
{
<tr>
<td>
<input type="hidden" asp-for="Clients[i].Id" class="form-control" />
<input type="hidden" asp-for="Clients[i].Name" />
<input type="checkbox" class="checkbox-group" asp-for="Clients[i].Selected" />
</td>
<td>
@Html.DisplayFor(modelItem => Model.Clients[i].Id)
</td>
<td>
@Html.DisplayFor(modelItem => Model.Clients[i].Name)
</td>
</tr>
}
</tbody>
</table>
Essayez ceci:
@Html.CheckBox("CheckAll", false, new { id = "select_all" })
$('#select_all').click(function () {
$('.someClass').prop('checked', this.checked)
});
Utilisez le code ci-dessous
$(document).ready(function () {
$("#ckbCheckAll").click(function () {
$(".checkBoxClass").prop('checked', $(this).prop('checked'));
});
$(".checkBoxClass").change(function(){
if (!$(this).prop("checked")){
$("#ckbCheckAll").prop("checked",false);
}
})
});