Joanmacat Joanmacat - 2 months ago 7
HTML Question

HTML choose three different checkbox and show them

I have a very simple HTML page with different checkboxes and I wish to select three of them and show the name of the product below.

What I need, for example if I choose the checkboxes nÂș 1, 3 and 4, I need to see:

Choose 3 perfumes


  1. Eau d'Issey

  2. Tropical

  3. Eau d'Issey2



But everytime I click in one checkbox I get three same results. Anybody can help mw with that? I'm very new in JavaScript and this is struggling a lot to me.

I let you the code below...

Thank you very much!



<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

Don't use numbers for id value, id="1" will maybe work somewhere but id attributes must start with letter. Close your html tags which need to be closed. in this example it won't affect how program works but a lot of times it will. A lot of javascript bugs are caused by bad html.
In your program you already have html object, you don't need to search for its id attribute, instead of:

 document.getElementById(me.id).checked;

You can use

me.checked

This example is maybe not exactly what you want but it's improvement.

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