Plusieurs Cases à cocher au moins 1

J'ai une liste de plusieurs cases à cocher. l'utilisateur peut vérifier tous, mais au moins est requis. Vous ne savez pas comment faire ceci se produire

<p>Box Set 1</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 1" required><label>Box 1</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 2" required><label>Box 2</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 3" required><label>Box 3</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 4" required><label>Box 4</label></li>
</ul>
<p>Box Set 2</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 5" required><label>Box 5</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 6" required><label>Box 6</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 7" required><label>Box 7</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 8" required><label>Box 8</label></li>
</ul>
<p>Box Set 3</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 9" required><label>Box 9</label></li>
</ul>
<p>Box Set 4</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 10" required><label>Box 10</label></li>
</ul>
  • Vous pouvez utiliser PHP pour vérifier si au moins 1 des cases à cocher est cochée. Vous seriez probablement voulez également vous assurer que votre <input "nom"> est différent pour chaque case d'obtenir autrement le retour des valeurs de variables peut être difficile.
  • Eu le même problème. Résolu avec: stackoverflow.com/a/37825072/1479143
InformationsquelleAutor Jeff Morrris | 2014-03-06
  1. 38

    Voici un exemple d'utilisation de jquery et html.

    <html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$('#checkBtn').click(function() {
checked = $("input[type=checkbox]:checked").length;
if(!checked) {
alert("You must check at least one checkbox.");
return false;
}
});
});
</script>
<p>Box Set 1</p>
<ul>
<li><input name="BoxSelect[]" type="checkbox" value="Box 1" required><label>Box 1</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 2" required><label>Box 2</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 3" required><label>Box 3</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 4" required><label>Box 4</label></li>
</ul>
<p>Box Set 2</p>
<ul>
<li><input name="BoxSelect[]" type="checkbox" value="Box 5" required><label>Box 5</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 6" required><label>Box 6</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 7" required><label>Box 7</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 8" required><label>Box 8</label></li>
</ul>
<p>Box Set 3</p>
<ul>
<li><input name="BoxSelect[]" type="checkbox" value="Box 9" required><label>Box 9</label></li>
</ul>
<p>Box Set 4</p>
<ul>
<li><input name="BoxSelect[]" type="checkbox" value="Box 10" required><label>Box 10</label></li>
</ul>
<input type="button" value="Test Required" id="checkBtn">
</body>
</html>
    • Lorsque la case n'est pas cochée, l'erreur s'affiche. Lorsque la case n'est pas cochée formulaire ne pas soumettre?
    • Oups, lorsqu'une case EST cochée forme ne se soumet pas
    • Mon exemple ne pas inclure une balise de formulaire ou un bouton de soumission. Je vais laisser ça à faire pour vous.
    • Jason, quand ils ne les cases sont cochées, l'erreur s'affiche. lorsque la case est cochée, le formulaire ne s'y soumettent pas. Voici un exemple: tylerwebdesigns.com/test/ckbox.html
    • Enfin je l'ai! Dû ajouter return false; if(!checked) { alert("Vous avez beaucoup de cocher au moins une case.") return false; }
    • Veuillez ajouter à votre code, de sorte que si quelqu'un l'utilise dans l'avenir, il sera de travail/. Merci beaucoup! Jeff
    • Ok Jeff, j'ai ajouté le return false pour empêcher l'envoi d'un formulaire.
    • comment pourrais-je vérifier plusieurs groupes de cases à cocher à l'aide de ce script?
    • Si vous avez plusieurs cases à cocher pour valider, l'utilisation vérifié = $("input[name='BoxSelect[]']:checked").longueur; dans le code javascript.

    InformationsquelleAutor Jason R
  2. 6

    Ce qui devrait avoir ce dont vous avez besoin, consultez le jsfiddle en bas:

    $(document).ready(function () {
$('#txt').val($("input[type=checkbox]:checked").length);
$('#txt2').val($("input[type=checkbox]").length);
$('input[type=checkbox]').change(function () {
checked = $("input[type=checkbox]:checked").length;
$('#block').show();
$('#block2').hide();
if (checked > 0) {
$('#block').hide();
$('#block2').show();
$('#txt').val(checked);
}
});
});

    http://jsfiddle.net/wpgeek/arEdz/

    • Ce qui se passe si Javascript est désactivé?
    • +1 parce que javascript/jQuery est plus facile/plus de sens que d'utiliser PHP. Il vaut mieux vérifier avant que le formulaire est même présenté.
    • ...mais la pensée de Dynelight de commentaire ci-dessous, il serait même préférable d'utiliser à la fois si personne ne peut vous tromper si ils s'amusent avec leurs javascript.
    • Je n'ai besoin de vérifier sur soumettre. Il y a beaucoup d'autres données et j'aimerais passer ou ils auraient à recommencer.
    • Comment puis-je mettre d'autre dans le js si rien n'est coché et arrêter de la forme de l'envoi? si (checked > 0) { $('#bloc").hide(); $('#bloc2').show(); $('#txt').val(coché); } else { case n'est pas cochée }
    InformationsquelleAutor stackPusher
  3. 0

    Vous pouvez soit le faire sur un PHP ou Javascript niveau. Si vous utilisez Javascript et/ou JQuery, vous pouvez vérifier et de valider si toutes les cases sont cochées avec un sélecteur de...

    Jquery propose également plusieurs de validation des bibliothèques. Découvrez: http://jqueryvalidation.org/

    Le problème avec l'utilisation de Javascript pour valider, c'est qu'il peut être contourné donc, il est sage de vérifier sur le serveur.

    Exemple à l'aide de PHP et en supposant que vous appelez une PO

    <?php
if( $_GET["BoxSelect"] )
{
//Process your form here
//Save to database, send email, redirect...
} else {
//Return an error and do not anything
echo "Checkbox is missing"; 
exit();
}
?>
    • +1 pour PHP alternative, même si je pense toujours que Javascript est le chemin à parcourir.
    • Bon point, en fait. Super vérifié!
    • Que faire si ils ne sont pas à l'aide de php? Vous devriez faire deux. L'utilisation de javascript car il vous donnera une validation plus rapide de réponse et de sauver serveur web de ressources, mais de retour avec votre plate-forme serveur langue, parce que vous ne pouvez pas faire confiance le navigateur de l'utilisateur.
    InformationsquelleAutor Dynelight
  4. 0

    Le problème avec la solution retenue ci-dessus ne permettent pas la condition else sur le formulaire de soumission (si une case a été cochée), empêchant ainsi la soumission de formulaire au moins quand je l'ai essayé.

    J'ai découvert une autre solution que les effets sur le résultat souhaité plus complètement à mon humble avis, ici:

    S'assurant au moins une case est cochée

    Code comme suit:

    function valthis() {
var checkBoxes = document.getElementsByClassName( 'myCheckBox' );
var isChecked = false;
for (var i = 0; i < checkBoxes.length; i++) {
if ( checkBoxes[i].checked ) {
isChecked = true;
};
};
if ( isChecked ) {
alert( 'At least one checkbox checked!' );
} else {
alert( 'Please, check at least one checkbox!' );
}   
}

    Violon

    Que le code & réponse par Vell

    InformationsquelleAutor collyg
  5. 0

    À l'aide de ce que vous pouvez cocher au moins une case est cochée ou non dans les différents groupes de checkbox ou plusieurs cases.

    Référence : Lien

    <label class="control-label col-sm-4">Check Box 1</label>
<input type="checkbox" name="checkbox1" id="checkbox1" value=Male /> Male<br />
<input type="checkbox" name="checkbox1" id="checkbox1" value=Female /> Female<br />
<label class="control-label col-sm-4">Check Box 2</label>
<input type="checkbox" name="checkbox2" id="checkbox2" value=ck1 /> ck1<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value=ck2 /> ck2<br />
<label class="control-label col-sm-4">Check Box 3</label>
<input type="checkbox" name="checkbox3" id="checkbox3" value=ck3 /> ck3<br />
<input type="checkbox" name="checkbox3" id="checkbox3" value=ck4 /> ck4<br />
<script>
function checkFormData() {
if (!$('input[name=checkbox1]:checked').length > 0) {
document.getElementById("errMessage").innerHTML = "Check Box 1 can not be null";
return false;
}
if (!$('input[name=checkbox2]:checked').length > 0) {
document.getElementById("errMessage").innerHTML = "Check Box 2 can not be null";
return false;
}
if (!$('input[name=checkbox3]:checked').length > 0) {
document.getElementById("errMessage").innerHTML = "Check Box 3 can not be null";
return false;
}
alert("Success");
return true;
}
</script>
    InformationsquelleAutor Parth Patel