J'ai ce javascript pour les cases à cocher "Tout cocher" et "Tout décocher". Cela fonctionnait bien, mais maintenant que j'ai ajouté un formatage HTML, je n'arrive pas à le faire fonctionner correctement. Le bouton "Tout décocher" semble fonctionner, mais le bouton "Tout cocher" semble rapidement cocher puis décocher toutes les cases de mon formulaire. Qu'est-ce que j'ai fait de mal et comment puis-je résoudre ce problème afin que les boutons "Tout vérifier" et "Tout décocher" fonctionnent correctement?

Voici mon code:

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style>

</style>
</head><body bgcolor="#99ccff">


    <script type="text/javascript" language="javascript">
    function checkAll(formname, checktoggle)
    {
      var checkboxes = new Array();
      checkboxes = document.forms[formname].getElementsByTagName('input');

      for (var i=0; i<checkboxes.length; i++)  {
        if (checkboxes[i].type == 'checkbox')   {
          checkboxes[i].checked = checktoggle;
        }
      }
    }
    </script>

    <form name="list_form" action="#" method='POST'>
    <input type="hidden" name="selected_region" value="APAC">
    <input type="hidden" name="selected_qtr" value="Q1">
    <input type="hidden" name="selected_year" value="2013">


    <table width="300" cellpadding="0" cellspacing="25" valign="top" border="0">

    <TR valign="top">
        <td>
            <table width="400" class="border0">
            <TR valign="bottom">
                <td id="tfont4"><b>Check Test</b><BR><hr><BR></td>
            </tr>
            </table>
        </td>
    </TR>

    <tr>
    <td>
    <table width="400" cellpadding="0" cellspacing="0" valign="top" border="0">
        <tr>
           <td>
           <input class="button" type="Submit" value="Check All" onclick="javascript:checkAll('list_form', true);" href="javascript:void();">
           </td>
           <td align="right">
           <input class="button" type="Submit" value="Uncheck All" onclick="javascript:checkAll('list_form', false);" href="javascript:void();">
           </td>
       </tr>
    </table>
    </td>
    </tr>

    <table border="0" cellpadding="10" width="400">
        <tr>
        <td valign="top">
            <input id="Indonesia" TYPE="checkbox" NAME="selected_countries" value="Indonesia">
                        <label for="Indonesia"><span><span></span></span>Indonesia</label><BR>
            <input id="Malaysia" TYPE="checkbox" NAME="selected_countries" value="Malaysia">
                        <label for="Malaysia"><span><span></span></span>Malaysia</label><BR>
            <input id="Singapore" TYPE="checkbox" NAME="selected_countries" value="Singapore">
                        <label for="Singapore"><span><span></span></span>Singapore</label><BR>
            <input id="Thailand" TYPE="checkbox" NAME="selected_countries" value="Thailand">
                        <label for="Thailand"><span><span></span></span>Thailand</label><BR>
        </td>
        <td valign="top">
        </td>
        <td valign="top">
        </td>
    </tr>
    </table>
    <BR>
    &nbsp;&nbsp;&nbsp;<input class="button" type="Submit" value="Generate Reports">
    </form>
    </center>
0
Chris Nielsen 9 août 2016 à 18:19

3 réponses

Meilleure réponse

Cela semble bien fonctionner. Le problème que vous avez mentionné est peut-être dû au fait que le type de saisie des champs à cocher et à décocher est Envoyer au lieu de Bouton.

    function checkAll(formname, checktoggle) {
      var checkboxes = new Array();
      checkboxes = document.forms[formname].getElementsByTagName('input');

      for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].type == 'checkbox') {
          checkboxes[i].checked = checktoggle;
        }
      }
    }
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <style>
  </style>
</head>

<body bgcolor="#99ccff">


  <form name="list_form" action="#" method='POST'>
    <input type="hidden" name="selected_region" value="APAC">
    <input type="hidden" name="selected_qtr" value="Q1">
    <input type="hidden" name="selected_year" value="2013">


    <table width="300" cellpadding="0" cellspacing="25" valign="top" border="0">

      <TR valign="top">
        <td>
          <table width="400" class="border0">
            <TR valign="bottom">
              <td id="tfont4"><b>Check Test</b>
                <BR>
                <hr>
                <BR>
              </td>
            </tr>
          </table>
        </td>
      </TR>

      <tr>
        <td>
          <table width="400" cellpadding="0" cellspacing="0" valign="top" border="0">
            <tr>
              <td>
                <input type="button" value="Check All" onclick="javascript:checkAll('list_form', true);" href="javascript:void();">
              </td>
              <td align="right">
                <input type="button" value="Uncheck All" onclick="javascript:checkAll('list_form', false);" href="javascript:void();">
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <table border="0" cellpadding="10" width="400">
        <tr>
          <td valign="top">
            <input id="Indonesia" TYPE="checkbox" NAME="selected_countries" value="Indonesia">
            <label for="Indonesia"><span><span></span></span>Indonesia</label>
            <BR>
            <input id="Malaysia" TYPE="checkbox" NAME="selected_countries" value="Malaysia">
            <label for="Malaysia"><span><span></span></span>Malaysia</label>
            <BR>
            <input id="Singapore" TYPE="checkbox" NAME="selected_countries" value="Singapore">
            <label for="Singapore"><span><span></span></span>Singapore</label>
            <BR>
            <input id="Thailand" TYPE="checkbox" NAME="selected_countries" value="Thailand">
            <label for="Thailand"><span><span></span></span>Thailand</label>
            <BR>
          </td>
          <td valign="top">
          </td>
          <td valign="top">
          </td>
        </tr>
      </table>
      <BR>&nbsp;&nbsp;&nbsp;
      <input class="button" type="Submit" value="Generate Reports">
  </form>
  </center>
3
10100111001 9 août 2016 à 15:27

Vos boutons sont configurés pour envoyer votre formulaire, donc la page est rechargée (voir le suffixe /# sur l'URL lorsque vous appuyez sur le bouton.
La solution la plus simple consiste à modifier <input type="submit"> Vous pouvez soit modifier les entrées en type="button". De cette façon, appuyer sur le bouton exécute les fonctions sans soumettre le formulaire. Une autre option serait d'ajouter une méthode preventDefault() à un EventListener, comme:

document.getElementById(....).addEventListener("click", function(event)
{
    event.preventDefault();
    .....
});

Cela empêchera également la soumission du formulaire.

0
Sam Anderson 9 août 2016 à 15:31

Changer le type d'entrée = "Soumettre" afin que le type d'entrée = "bouton"

0
riyadi 9 août 2016 à 15:47