javascript 选中复选框时调用函数，取消选中时不会触发 onclick 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16523906/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calling a function when checking a checkbox, onclick event doesn't fire when unchecking
提问by nherrmann
I should probably start by mentioning that I am using Internet Explorer 6. I am calling a JavaScript function (tabModifiedHighlight) from an onChangeevent. 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:
我应该首先提到我使用的是 Internet Explorer 6。我正在tabModifiedHighlight从onChange事件调用 JavaScript 函数 ( ) 。该功能在其他地方完美运行，但是，当我选中复选框时，我在页面上有几个地方可以使用它，但是当我取消选中它时，该事件甚至似乎都没有触发。这是 JavaScript 函数：
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.
此页面有多个“选项卡”，它们只是根据选择的一个设置为可见或隐藏的 div。它似乎是一致的，除了 2 个选项卡之外，它在任何地方都可以使用，而在这些选项卡上没有任何地方。我能看到的唯一其他区别是，根据是否选中复选框，不起作用的那些也在选项卡中显示或隐藏 div。我在函数的最开始添加了警报以查看它是否正在触发，并且在选中复选框时会发生，但在取消选中时不会。
I hope I made this clear, and any thoughts are appreciated!
我希望我说清楚了，任何想法都值得赞赏！
回答by rahul maindargi
As your code is not working only for two tabs, and working for all others its not an browser compatibility issue.onClickif checkbox you are calling these 3 methods
tylenolPoShowHide(); checkBoxHighlight(this, 'MedicationsRow2');tabModifiedHighlight()
由于您的代码不仅适用于两个选项卡，而且适用于所有其他选项卡，这不是浏览器兼容性问题。onClick如果复选框您正在调用这 3 个方法
tylenolPoShowHide(); checkBoxHighlight(this, 'MedicationsRow2');tabModifiedHighlight()
Note tabModifiedHighlightis last one..
注意tabModifiedHighlight是最后一张。。
if any of first two methods tylenolPoShowHideor checkBoxHighlightfails... then tabModifiedHighlightwill not be called.
如果前两种方法中的任何一种tylenolPoShowHide或checkBoxHighlight失败......那么tabModifiedHighlight将不会被调用。
I will suggest to add alert as first and last line in both tylenolPoShowHideand checkBoxHighlight...
我会建议将警报添加为第一行和最后一行，tylenolPoShowHide并且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
它将帮助您找到哪个实际上失败了，然后您可以在此处添加该代码，我们将能够进一步帮助您
