asked on

HTML list with checkboxes

I asked the experts how to create a list with checkboxes.
I recived the attached code from remorina, which is very good.
The only problem I have with it, is that when I click on the second line, the first line stays selected. I want that only the selected line will show as selected.

<html>  
<head>  
<title>Scrolling Checkboxes</title>  
<style type="text/css">  
    body {font:normal 12px Arial, Helvetica, Serif;}  
    .boxlist {overflow:auto;width:130px;height:75px;border:1px solid #336699;padding:0px;white-space:nowrap;overflow-x:hidden;}  
    .boxlist input {margin:0 0px 0 0;height:14px;width:17px;} 
    .selectelement {background:#fff;cursor:pointer;} 
    .selectedelement {background:#c0c0c0;cursor:pointer;} 
</style> 
<script type="text/javascript"> 
        function selectThis(el,cls) { 
            if (el.className=="selectelement")  
                {  
                    el.className="selectedelement" 
                    document.getElementById(cls).checked=true; 
                } 
                 
            else 
                { 
                    el.className="selectelement" 
                    document.getElementById(cls).checked=false; 
                } 
        } 
    </script> 
<script type="text/javascript"> 
function abc(obj,num) 
{ 
alert(num); 
} 
</script> 
 
</head>  
<body>  
<div class="boxlist" id="abc" style="width:100%">  
<div class="selectelement" onclick="selectThis(this, 'chk1');"><input type="checkbox" id="chk1" name="wow[0]" onclick="abc(this,5)">PHP</div> 
<div class="selectelement" onclick="selectThis(this, 'chk2');"><input id="chk2" type="checkbox" name="wow[1]">LINUX</div> 
<div class="selectelement" onclick="selectThis(this, 'chk3');"><input id="chk3" type="checkbox" name="wow[]">APACHE</div>  
<div class="selectelement" onclick="selectThis(this, 'chk4');"><input id="chk4" type="checkbox" name="wow[]">MYSQL</div>  
<div class="selectelement" onclick="selectThis(this, 'chk5');"><input id="chk5" type="checkbox" name="wow[]">SQLITE</div>  
<div class="selectelement" onclick="selectThis(this, 'chk6');"><input id="chk6" type="checkbox" name="wow[]">A Much Longer Line</div> 
</div>  
  
</body>  
</html>

Open in new window

ASKER CERTIFIED SOLUTION

remorina

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial