HTML选择三个不同的复选框并显示它们

我有一个非常简单的HTML页面，其中包含不同的复选框，我希望选择其中的三个并显示下面的产品名称。HTML选择三个不同的复选框并显示它们

我需要什么，例如，如果我选择复选框Nº1，3和4，我需要看到：

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

来源

2016-09-21 Joanmacat

请在代码编辑器使用整齐按钮。 – Roope

不要使用值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>

来源

2016-09-21 17:17:18 ban17

先生，你救了我的一天。非常感谢你的光芒！ – Joanmacat

尝试取消选中第三个复选框时出现问题。我试图找出如何解决它，但我还没有办法。你可以帮我吗？非常感谢。 – Joanmacat

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

最终代码

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

来源

2016-09-21 16:53:04

不，不起作用。 – Joanmacat

@Joanmacat我编辑并把最终的代码放在这里 –

HTML选择三个不同的复选框并显示它们

回答

相关问题