jeudi 22 septembre 2016

HTML choose three different checkbox and show them

I have a very simple HTML page with different checkboxes and I wish to select three of them and show the name of the product below.

What I need, for example if I choose the checkboxes nº 1, 3 and 4, I need to see:

Choose 3 perfumes

  1. Eau d'Issey
  2. Tropical
  3. Eau d'Issey2

But everytime I click in one checkbox I get three identical results. Can anyone help me with that? My code is below...

Thank you very much!

<html>

<head>
  <script language="javascript" type="text/javascript">
    function exefunction(me) {
      var check = document.getElementById(me.id).checked;
      var checked_value;
      var str1 = "product";
      var n = 1;
      for (i = 0; i <= 2; i++) {
        if (check) {
          checked_value = document.getElementById(me.id).name
          document.getElementById("product" + n).innerHTML = checked_value;
          n++;
        }
      }
    }
  </script>
</head>

<body>
  <p>1.
    <input type="checkbox" id="1" name="Eau d'Issey" title="Select All" onclick="exefunction(this);">
    <p>2.
      <input type="checkbox" id="2" name="Fahrenheit" title="Select All" onclick="exefunction(this);">
      <p>3.
        <input type="checkbox" id="3" name="Tropical" title="Select All" onclick="exefunction(this);">
        <p>4.
          <input type="checkbox" id="4" name="Eau d'Issey2" title="Select All" onclick="exefunction(this);">
          <p>5.
            <input type="checkbox" id="5" name="Fahrenheit2" title="Select All" onclick="exefunction(this);">
            <p>6.
              <input type="checkbox" id="6" name="Tropical2" title="Select All" onclick="exefunction(this);">

              <p>Choose 3 perfumes.</p>
              <h3>1: </h3>
              <p id="product1"></p>
              <h3>2: </h3>
              <p id="product2"></p>
              <h3>3: </h3>
              <p id="product3"></p>

</body>

</html>



Aucun commentaire:

Enregistrer un commentaire