Home/ Questions/Q 8199441
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T06:10:08+00:00

So the labels are populated from the database. Once the label is clicked, the

  • 0

So the labels are populated from the database. Once the label is clicked, the label need to turn red and bold. when clicked on another label, the first label need to come back to original state and the new label should be activated and it needs to be bold and red. for some reason, the changeActiveStates() only works for the first 2 labels, i.e., when first label is clicked it turns red and when the second label is clicked the first label is turned black and the second label is turned red. when the third label is clicked, the second label remains red and the third one turns red. How do i fix this??

Here is the code:

<html>
<span>
<input type="hidden" name="LiabFilter" id= "idLib<%=liabkey %>" value="<%=liabkey %>" />
<div>
<label for="idLib<%=liabkey%>" id="liablabel" style="cursor: hand; padding-left: 25px; font-weight: normal" 
                                    onClick ="clearLiabFilter();  
                                    document.getElementById('idLib<%=liabkey%>').checked = true; 
                                    changeActiveStates(this);">
<%=liab.getName() %> 
</br>
</label>
</div>
</span>
<style type="text/css">
               .activate { font-weight: bold; color:#e40000;}
               .visited{ font-weight: normal; color: #000000;}


                </style>
<script>
function byId(id) { 
    return document.getElementById ? document.getElementById(id) : document.all[id];
} 

var prevLink = ""; 

function changeActiveStates(ele) { 
    if (prevLink) byId(prevLink).className = '';
    ele.className = 'activate'; 
    prevLink = ele.id; 
    }
</script>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Are you averse to JQuery?

    If not, this should work.

    $('label').click(function() {
    $('label').removeClass('activate'); /* Remove 'activate' class from all labels */
    $(this).addClass('activate'); /* Add 'activate' class to clicked label
});

    EDIT: Example on jsFiddle

    EDIT: A little more detail as the questioner hasn’t used JQuery before.

    JQuery is a javscript library and so must be loaded by the browser before you can do all the nifty stuff.

    Add the following between the <head></head> tags on your page:

    <script src="http//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

    (Why let google host JQuery for you?)

    Then add the following, also between the tags but after the script tag given above: 

    $(document).ready(function() { 
    $('label').click(function() {
        $('label').removeClass('activate'); /* Remove 'activate' class from all labels */
        $(this).addClass('activate'); /* Add 'activate' class to clicked label
    });
});

    (What does $(document).ready() do?)

    • 0