0
votes

Exiger que certains numéros de cases soient vérifiés

J'affiche de nombreuses images dans une table et je demandais que les utilisateurs sélectionnent cinq d'entre eux.

Voici un échantillon d'une ligne de table: xxx

et le script J'utilise pour vous assurer que pas plus de cinq sont sélectionnés: xxx

Comment puis-je exiger qu'au moins cinq sont sélectionnés?

javascript html input checkbox require

0 commentaires

3 Réponses :

0
votes

Je n'utilise pas jQuery, mais vous pouvez utiliser un document.Queryselectorall () code> pour récupérer toutes vos cases à cocher et utiliser exemple TRAY # FILTER Pour avoir un tableau contenant uniquement les cases à cocher vérifiées et vérifiez que la taille de la matrice est Supérieur ou égal à 5.

Exemple: P>

const checkboxArray = document.querySelectorAll('.checkbox');
const checkedArray = Array.from(checkboxArray).filter(item => item.checked)
if (checkedArray.length > 5) {
  // More than 5 checkbox checked, do something
}

0 commentaires

0
votes

Essayez quelque chose comme ceci:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST">
  <tr>
    <td align="center" style="width: 200px; height: 200px"><input id="Image21_flag" name="flag[]" style="display: none;" type="checkbox" value="img21" /><label class="middlealign" for="Image21_flag"><img onerror="imgError(this);" src="${URL21}" /></label>
    </td>
    <td align="center" style="width: 200px; height: 200px"><input id="Image22_flag" name="flag[]" style="display: none;" type="checkbox" value="img22" /><label class="middlealign" for="Image22_flag"><img onerror="imgError(this);" src="${URL22}" /></label>
    </td>
    <td align="center" style="width: 200px; height: 200px"><input id="Image23_flag" name="flag[]" style="display: none;" type="checkbox" value="img23" /><label class="middlealign" for="Image23_flag"><img onerror="imgError(this);" src="${URL23}" /></label>
    </td>
    <td align="center" style="width: 200px; height: 200px"><input id="Image24_flag" name="flag[]" style="display: none;" type="checkbox" value="img24" /><label class="middlealign" for="Image24_flag"><img onerror="imgError(this);" src="${URL24}" /></label>
    </td>
    <td align="center" style="width: 200px; height: 200px"><input id="Image25_flag" name="flag[]" style="display: none;" type="checkbox" value="img25" /><label class="middlealign" for="Image25_flag"><img onerror="imgError(this);" src="${URL25}" /></label>
    </td>
  </tr>
  <input type="submit">
</form>

0 commentaires

-1
votes

J'affiche de nombreuses images dans une table et demandant aux utilisateurs de sélectionner cinq d'entre eux. [...] Comment puis-je exiger qu'au moins cinq sont sélectionnées? P>
Il existe de nombreuses approches différentes à cet égard, mais une approche serait de conserver un journal actif du nombre de cases à cocher et de ne pas être vérifiées, puis, chaque fois qu'une action nécessite une réponse, vérifiez que le total en direct et répondit en conséquence. p>
Exemple de travail: strong> p>
p>
<form> <table> <tr> <td><input name="flag" type="checkbox" value="img21" /></td> <td><input name="flag" type="checkbox" value="img22" /></td> <td><input name="flag" type="checkbox" value="img23" /></td> <td><input name="flag" type="checkbox" value="img24" /></td> <td><input name="flag" type="checkbox" value="img25" /></td> <td><input type="button" value="Submit Choices!" /> </tr> </table> </form>

1 commentaires

S'il vous plaît expliquer le bowvote. Merci.