Calling a function when checking a checkbox, onclick event doesn't fire when unchecking

Question

I should probably start by mentioning that I am using Internet Explorer 6. I am calling a JavaScript function (tabModifiedHighlight) from an onChange event. The function works perfectly other places however, I have a couple of places on the page where it works when I check the checkbox, but the event doesn't even seem to fire when I uncheck it. Here is the JavaScript function:

function tabModifiedHighlight(){
    alert("alert");
    var div, i, input, inputIndex, selects, selectIndex, selectedTab, highlighted;
    var tabs = new Array("admissioninformation","diet","vitalsigns","activities","nursing","ivfluids","medications1","medications2","labs","respiratory","diagnostic","consultations");
    for(i=0; i<(tabs.length); i++){
        selectedTab = tabs[i]+'tab';
        if (document.getElementById(selectedTab).className == "selectedtab"){
            div = document.getElementById(tabs[i]),
            input = div.getElementsByTagName('input'),
            selects = div.getElementsByTagName('select');
            break;
        }
     }
    highlighted = false;
    for (inputIndex = 0; inputIndex < input.length; inputIndex++){
        if (input[inputIndex].checked == true){
        highlighted = true;
    }               
}
for (inputIndex = 0; inputIndex < input.length; inputIndex++){
    if (input[inputIndex].type == 'text' && input[inputIndex].value != ""){
        highlighted = true;
    }               
}
for (selectIndex = 0; selectIndex < selects.length; selectIndex++){
    if (selects[selectIndex].value != ""){
        highlighted = true;
    }               
}
if (highlighted == true){
    document.getElementById(selectedTab).style.backgroundColor = "#FF0";
}
else {
    document.getElementById(selectedTab).style.backgroundColor = "#F0F0F0";
}

}

And here is the input that is calling it:

<input name="cbMedTylenolPO" id="cbMedTylenolPO" type="checkbox" value="PO" onClick="tylenolPoShowHide(); checkBoxHighlight(this, 'MedicationsRow2'); tabModifiedHighlight();" />

This page has multiple "tabs" which are just divs that are set to visible or hidden based on which one is selected. It seems consistent in that it works everywhere except for 2 of the tabs, and nowhere on those tabs. The only other difference I can see is that the ones that are not working are also showing or hiding divs within the tab, based on whether the checkbox is checked or not. I have added the alert at the very beginning of the function to see if it is firing or not, and it does when checking the checkbox, but not when unchecking.

I hope I made this clear, and any thoughts are appreciated!

Solution

As your code is not working only for two tabs, and working for all others its not an browser compatibility issue.
onClick if checkbox you are calling these 3 methods tylenolPoShowHide(); checkBoxHighlight(this, 'MedicationsRow2');tabModifiedHighlight()

Note tabModifiedHighlight is last one..

if any of first two methods tylenolPoShowHide or checkBoxHighlight fails... then tabModifiedHighlight will not be called.

I will suggest to add alert as first and last line in both tylenolPoShowHide and checkBoxHighlight ...

It will help you find which one is actually failing then you can add that code here and we will be able to help you further

Comments

[nherrmann]

Thanks so much! By debugging as you suggested adding alerts to the beginning and end of the other functions, I was able to determine that when it did fire was actually between the start and end of another function. Upon closer examination, I realized that the other function was calling the tabModifiedHighlight function if the checkbox was checked. I still don't know why it wasn't calling the function where I had it in the onClick event, but by modifying the other function to call it whether checked or not, I was able to resolve it so that it is working every time now. THANKS!