HTML 3つの異なるチェックボックスを選択して表示

私は非常に単純なHTMLページにさまざまなチェックボックスを使用しています。そのうち3つを選択して下の製品名を表示したいと思います。HTML 3つの異なるチェックボックスを選択して表示

3つの香水

オードールを選択してください
熱帯イッセイを：私はチェックボックスが1、3、4Nº選択した場合

は私が必要なもの、例えば、私は確認する必要があります
Eau d'Issey2

1つのチェックボックスをクリックするたびに、3つの同じ結果が得られます。誰もそれで私を助けることができますか？私のコードは以下です

ありがとうございました！

<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 = "1" は、おそらくどこかに動作しますが、id属性は文字で開始する必要があり、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

3番目のチェックボックスをオフにすると問題が発生します。私はそれを解決する方法を理解しようとしましたが、私はまだそれではできません。手伝って頂けますか？どうもありがとう。 – 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 3つの異なるチェックボックスを選択して表示

答えて

関連する問題