Vérification plusieurs case à cocher

poupilou · 10 Janvier 2013

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

jamalofski · 10 Janvier 2013

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>

UsagiYojimbo · 10 Janvier 2013

http://www.web-tutoriel.com/2010/01/04/verifier-quune-checkbox-est-coc ... ec-jquery/

Supermaury · 10 Janvier 2013

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>

poupilou · 10 Janvier 2013

Supermaury a dit:
Bonjour (et bonne année à tous !).

Un petit bout de code qui devrait fonctionner.

@++

Merci beaucoup, ça marche nickel :mrgreen: encore merci pour ta(vos) réponse(s) et bonne année à tous