Vérification plusieurs case à cocher

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par poupilou, 10 Janvier 2013.

  1. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    906
    J'aime reçus:
    14
    Salut à tous,

    J'ai regardé sur le web pas mal d'exemples pour vérifier si une case à cocher a été coché mais j'ai pas trouvé un exemple qui fonctionne dans mon cas :(

    J'ai une série de 15 case à cocher dans un tableau html, sous ce tableau j'ai 2 boutons input, je souhaite que lorsqu'on clique sur l'un de ces boutons un message d'alerte s'affiche indiquant qu'il faut cocher au moins une case.

    Quel serait la fonction javascript ctrlForm qui pourrait faire ce contrôle :
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title></title>
        <script type="text/javascript">
          function ctrlForm()
          {
          .................................. 
          }
        </script>
      </head>
      <body>
        <form id="formulaire" method="post" action="../" onsubmit="return ctrlForm()">
          <table border="0" width="50%" align="center">
            <tr>
              <td>ligne 1</td>
              <td>
                <input type="checkbox" name="chk[]" value="1" />
              </td>
            </tr>
            <tr>
              <td>ligne 2</td>
              <td>
                <input type="checkbox" name="chk[]" value="2" />
              </td>
            </tr>
            <tr>
              <td>ligne 3</td>
              <td>
                <input type="checkbox" name="chk[]" value="3" />
              </td>
            </tr>
            <tr>
              <td>ligne 4</td>
              <td>
                <input type="checkbox" name="chk[]" value="4" />
              </td>
            </tr>
            <tr>
              <td>ligne 5</td>
              <td>
                <input type="checkbox" name="chk[]" value="5" />
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <input type="submit" name="btn1" value="Ajouter au comparateur" />
                <input type="submit" name="btn2" value="Ajouter au panier" />
              </td>
            </tr>
          </table>
        </form>
      </body>
    </html>
    
    Merci pour votre aide.

    Bruno
     
  2. jamalofski
    jamalofski WRInaute discret
    Inscrit:
    3 Mars 2007
    Messages:
    225
    J'aime reçus:
    0
    Un exemple d'exploitation de ton code (non optimisé) :

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title></title>
        <script type="text/javascript">
          function ctrlForm()
          {
    	if(document.getElementsByName("chk")[0].checked)
    		alert('0 : Oui');
    	else
    		alert('0 : Non');
       
    	if(document.getElementsByName("chk")[1].checked)
    		alert('1 : Oui');
    	else
    		alert('1 : Non');
         
    	if(document.getElementsByName("chk")[2].checked)
    		alert('2 : Oui');
    	else
    		alert('2 : Non');
         
    	if(document.getElementsByName("chk")[3].checked)
    		alert('3 : Oui');
    	else
    		alert('3 : Non');
         
    	if(document.getElementsByName("chk")[4].checked)
    		alert('4 : Oui');
    	else
    		alert('4 : Non');
          }
        </script>
      </head>
      <body>
        <form id="formulaire" method="post" action="../" onsubmit="return ctrlForm()">
          <table border="0" width="50%" align="center">
            <tr>
              <td>ligne 1</td>
              <td>
                <input type="checkbox" name="chk" value="1" />
              </td>
            </tr>
            <tr>
              <td>ligne 2</td>
              <td>
                <input type="checkbox" name="chk" value="2" />
              </td>
            </tr>
            <tr>
              <td>ligne 3</td>
              <td>
                <input type="checkbox" name="chk" value="3" />
              </td>
            </tr>
            <tr>
              <td>ligne 4</td>
              <td>
                <input type="checkbox" name="chk" value="4" />
              </td>
            </tr>
            <tr>
              <td>ligne 5</td>
              <td>
                <input type="checkbox" name="chk" value="5" />
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <input type="submit" name="btn1" value="Ajouter au comparateur" />
                <input type="submit" name="btn2" value="Ajouter au panier" />
              </td>
            </tr>
          </table>
        </form>
      </body>
    </html>
     
  3. Supermaury
    Supermaury WRInaute discret
    Inscrit:
    25 Mars 2009
    Messages:
    144
    J'aime reçus:
    5
    Bonjour (et bonne année à tous !).

    Un petit bout de code qui devrait fonctionner.

    @++

    Code:
    <script type="text/javascript">
    function ctrlForm() {
    	var checked = 0;
    	var mybox = document.forms[0].elements['chk[]'];
    	for (i=0; i<mybox.length; i++) {
    		if (mybox[i].checked==true) {
    			checked=1;
    		}
    	}
    	if (checked>0) {
    		//C'est OK, traitement de tes actions par bouton
    	} else {
    		alert('Merci de cocher au moins une case');
    		return false;
    	}
    }
    </script>
    
     
  4. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    906
    J'aime reçus:
    14
    Merci beaucoup, ça marche nickel :mrgreen: encore merci pour ta(vos) réponse(s) et bonne année à tous
     
Chargement...
Similar Threads - Vérification case cocher Forum Date
vérification de mon DMARC/FPS.. de Google. Administration d'un site Web 22 Novembre 2021
URL rewritting vérification URL Rewriting et .htaccess 10 Novembre 2018
Verification du duplicate content Débuter en référencement 4 Décembre 2017
Logiciel ou lien de vérification positionnement sur google Débuter en référencement 20 Novembre 2016
Tunnel de conversion et page de verification Google Analytics 14 Avril 2014
Verification du duplicate content Référencement Google 12 Décembre 2013
Verification historique traffic Débuter en référencement 30 Septembre 2013
verification de l'etat de fonctionnement d 'un site Demandes d'avis et de conseils sur vos sites 6 Septembre 2013
Vérification chiffres de consultation awstats Administration d'un site Web 7 Mai 2013
Backlink, vérification Netlinking, backlinks, liens et redirections 3 Avril 2013