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

HTML choose three different checkbox and show them

本文关键字：复选框 显示 选择 三个 HTML      更新时间：2023-09-26

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

我需要的，例如，如果我选择了第1,3和4个复选框，我需要看到:

选择3种香水

  1. 淡d 'Issey
    2. 热带
  2. 淡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>

不要使用数字作为id值，id="1"可能会在某些地方工作，但id属性必须以字母开头。关闭需要关闭的html标签。在这个例子中，它不会影响程序的工作方式，但很多时候会。很多javascript bug都是由糟糕的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>

最终代码 
<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>
相关文章：