Javascript - 复选框的 Onchange 事件仅适用于 Firefox 和 Opera？答案

【问题标题】：Javascript - Onchange Event for checkbox works only in Firefox and Opera?Javascript - 复选框的 Onchange 事件仅适用于 Firefox 和 Opera？
【发布时间】：2014-02-14 11:31:30
【问题描述】：

这里有两个按钮，我想根据复选框的状态更改 css 显示属性。

    <input type="submit" id="unchecked" class="button red" value="Start My PPI Claim" style="display:block" onclick="location.href = 'https://www.gladstonebrookes.co.uk/extended-form';" />
<input type="submit" id="checked" class="button yellow" name="submit" value="Start My PPI Claim" style="display:none" onClick="javascript:return fncValidateForm(this)" />

这里是复选框的代码

<input type="checkbox" name="checkbox" id="checkbox" onchange="toggleCheckbox(this)" />

最后是 Javascript 函数

function toggleCheckbox (element) {
    if(element.checked) {
        document.getElementById("checked").style = "display:block";
        document.getElementById("unchecked").style = "display:none";
            }
    else if(!element.checked) {
        document.getElementById("checked").style = "display:none";
        document.getElementById("unchecked").style = "display:block"; 
  }  
}

这在 Firefox 和 Opera 中运行良好，但在 Chrome、Safari 和 IE 中没有发生 Onchange。有什么建议么？提前致谢。

【问题讨论】：

标签： javascript html css checkbox

【解决方案1】：

你可以试试这个

function toggleCheckbox (element) {
    if(element.checked) {
        document.getElementById("checked").style.display = "block";
        document.getElementById("unchecked").style.display = "none";
            }
    else if(!element.checked) {
        document.getElementById("checked").style.display = "none";
        document.getElementById("unchecked").style.display = "block"; 
  }  
}

【讨论】：

谢谢，效果很好，我很快就会设置为答案。只是出于兴趣，最初的 Javascript 不正确，而 FF 和 Opera 对糟糕的代码更宽容？
我想知道你的初始代码到底能正常工作。 style 属性旨在以这种方式使用。见here。

【解决方案2】：

如果你喜欢整洁的版本：

function toggleCheckbox (element) {
var b1 = !element.checked ? "none" : "block";
var b2 = !element.checked ? "block" : "none";
document.getElementById("checked").style.display = b1;
document.getElementById("unchecked").style.display = b2;
}

【讨论】：

【解决方案3】：

超快速的 JQuery 修复，:)

$(document).ready(function() {
    $("#checkbox").click(function (){
        $('#unchecked, #checked').toggle();
    });    
});

DEMO

【讨论】：