2016-09-21 191 views
0

我有一個非常簡單的HTML頁面,其中包含不同的複選框,我希望選擇其中的三個並顯示下面的產品名稱。HTML選擇三個不同的複選框並顯示它們

我需要什麼,例如,如果我選擇複選框Nº1,3和4,我需要看到:

選擇3個香水

  1. 香水一生之
  2. 熱帶
  3. Eau d'Issey2

但是每次點擊一個複選框,我會得到三個相同的結果。任何人都可以幫助我嗎? 我的代碼如下...

非常感謝!

<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>

+2

請在代碼編輯器使用整齊按鈕。 – Roope

回答

0

不要使用值ID號,ID = 「1」,將可能的地方工作,但ID屬性必須以字母開頭。關閉需要關閉的html標籤。在這個例子中,它不會影響程序的工作方式,但會影響很多次。很多javascript錯誤都是由錯誤的html造成的。
在你的程序中你已經有HTML對象,你並不需要尋找它的id屬性,而不是:

document.getElementById(me.id).checked; 

您可以使用

me.checked 

這個例子也許不是什麼你想要但它是改進。

<!doctype html> 
 
    <html lang="en-US"> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title></title> 
 
     <script language="javascript" type="text/javascript"> 
 
      var n=1; 
 
      function exefunction(me) { 
 
       var checked_value=me.getAttribute('name'); 
 
       if(me.checked){ 
 
        document.getElementById("product" + n).innerHTML = checked_value; 
 
        n++; 
 
        if(n==4)n=1; 
 
       }else{ 
 
        for(var i=1;i<=3;i++){ 
 
         var d=document.getElementById('product'+i); 
 
         if(d.innerHTML==checked_value && d.innerHTML!=''){ 
 
          d.innerHTML=""; 
 
          n=i; 
 
         } 
 
        } 
 
       } 
 
      } 
 
     </script> 
 
    </head> 
 
    
 
    <body> 
 
    <p>1. <input type="checkbox" name="Eau d'Issey" title="Select All" onclick="exefunction(this);"></p> 
 
    <p>2. <input type="checkbox" name="Fahrenheit" title="Select All" onclick="exefunction(this);"></p> 
 
    <p>3. <input type="checkbox" name="Tropical" title="Select All" onclick="exefunction(this);"></p> 
 
    <p>4. <input type="checkbox" name="Eau d'Issey2" title="Select All" onclick="exefunction(this);"></p> 
 
    <p>5. <input type="checkbox" name="Fahrenheit2" title="Select All" onclick="exefunction(this);"></p> 
 
    <p>6. <input type="checkbox" name="Tropical2" title="Select All" onclick="exefunction(this);"></p> 
 
    
 
    <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>

+0

先生,你救了我的一天。非常感謝你的光芒! – Joanmacat

+0

嘗試取消選中第三個複選框時出現問題。我試圖找出如何解決它,但我還沒有辦法。你可以幫我嗎?非常感謝。 – Joanmacat

+0

因爲我把<3而不是<= 3 ... :) – ban17

0

最終代碼

<html> 

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

不,不起作用。 – Joanmacat

+0

@Joanmacat我編輯並把最終的代碼放在這裏 –