S'assurant au moins une case est cochée
J'ai un formulaire avec plusieurs cases, et je veux utiliser JavaScript pour assurez-vous qu'au moins une case est cochée. C'est ce que j'ai droit maintenant, mais peu importe ce qui est choisi, un message d'alerte apparaît.
JS (mauvais)
function valthis(){
if (document.FC.c1.checked) {
alert ("thank you for checking a checkbox")
} else {
alert ("please check a checkbox")
}
}
HTML
<p>Please select at least one Checkbox</p>
<br>
<br>
<form name = "FC">
<input type = "checkbox" name = "c1" value = "c1"/> C1
<br>
<input type = "checkbox" name = "c1" value = "c2"/> C2
<br>
<input type = "checkbox" name = "c1" value = "c3"/> C3
<br>
<input type = "checkbox" name = "c1" value = "c4"/> C4
<br>
</form>
<br>
<br>
<input type = "button" value = "Edit and Report" onClick = "valthisform();">
Donc ce que j'ai fini par le faire en JS c'était ça:
function valthisform(){
var chkd = document.FC.c1.checked || document.FC.c2.checked||document.FC.c3.checked|| document.FC.c4.checked
if (chkd == true){
} else {
alert ("please check a checkbox")
}
}
J'ai décidé de laisser tomber le "Merci" de la partie pour s'adapter avec le reste de la mission. Merci beaucoup à tous ceux des conseils vraiment aidé.
- Pourquoi le "Modifier et Rapport" bouton à l'extérieur de la forme?
Vous devez vous connecter pour publier un commentaire.
Vous devriez éviter d'avoir deux cases avec le même nom si vous envisagez de référence comme
document.FC.c1
. Si vous avez plusieurs cases à cocher nomméec1
comment le navigateur de savoir à qui vous faites référence?Voici un non-jQuery solution pour vérifier si toutes les cases sur la page sont vérifiées.
Vous avez besoin de la
Array.prototype.slice.call
permettant de convertir laNodeList
retourné pardocument.querySelectorAll
dans un tableau que vous pouvez appelersome
sur.Cela devrait fonctionner:
Si vous avez une question sur le code, juste un commentaire.
j'utilise
l=checkboxs.length
pour améliorer les performances. Voir http://www.erichynds.com/javascript/javascript-loop-performance-caching-the-length-property-of-an-array/Cochez cette.
Vous ne pouvez pas accéder aux entrées d'un formulaire via leur nom. Utilisation
document.getElements
méthodes à la place.Vanille JS:
Explication:
Une fois la soumission d'un formulaire a été tenté, cette mise à jour de votre case de la section de l'étiquette pour signaler à l'utilisateur de cocher une case s'il/elle n'a pas encore. Si aucune des cases sont cochées, caché 'erreur' étiquette est révélé invitant l'utilisateur à " Veuillez cocher une case!'. Si l'utilisateur vérifie au moins une case à cocher, le label rouge est instantanément cachés à nouveau, révélant l'étiquette d'origine. Si l'utilisateur de l'onu-vérifie toutes les cases, le label rouge renvoie en temps réel. Ceci est rendu possible par du JavaScript
onchange
événement (écrit que.addEventListener('change', function(){});
Vous pouvez vérifier qu'au moins une case est cochée ou non à l'aide de ce code simple. Vous pouvez également déposer votre message.
Référence Lien
Prévenir l'utilisateur de la désélection de la dernière vérification de case à cocher.
jQuery (réponse originale à cette question).
MISE À JOUR DE RÉPONSE 2019-05-31
Plaine JS
JS:
HTML:
Vous pouvez utiliser ce code pour vérifier que la case est cochée au moins un.
Merci!!