Question

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

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

选择3种香水

Eau d'Issey
热带
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>

Answer 1

最终代码

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

Answer 2

不要使用数字作为id值，id =＆＃34; 1＆＃34;可能会在某处工作，但id属性必须以字母开头。关闭需要关闭的html标签。在这个例子中，它不会影响程序的工作方式，但很多时候会影响程序。很多javascript错误都是由糟糕的HTML引起的。
在您的程序中，您已经拥有了html对象，您不需要搜索其id属性，而不是：

 document.getElementById(me.id).checked;

您可以使用

me.checked

这个例子可能不是你想要的，但它有所改进。

＆＃13;

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

＆＃13;

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

2 个答案: