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

VapiSoftAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
remorinaConnect With a Mentor Commented:
Hi VapiSoft,
Try the below code

Cheers
<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) {
            mainboxID=el.parentNode.id;
            mainbox= document.getElementById(mainboxID);
            listElements = mainbox.getElementsByTagName("div");
            for (i=0;i<listElements.length;i++)
            {
                listElements[i].className="selectelement";
                listElements[i].firstChild.checked=false;
                
            }
            el.className="selectedelement"
            document.getElementById(cls).checked=true;
    </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

0
All Courses

From novice to tech pro — start learning today.