Question

我有：

<input type="checkbox" id="showdiv">SHOW ME!

<div id="hello" style="display:none">
  Hello world!
</div>

<script type="text/javascript">
  document.getElementById("showdiv").checked ? document.getElementById("hello").style.display = "inline" : document.getElementById("hello").style.display = "none";
</script>

错误在哪里？单击时不会显示div ...

Answer 1

您应该将脚本包装到复选框的onclick函数中。

这样的事情：

document.getElementById("showdiv").onclick = function() {
    document.getElementById("showdiv").checked ? document.getElementById("hello").style.display = "inline" : '';
};

Answer 2

添加点击事件的代码在哪里？浏览器不会低估应该运行onclick

(function() {
    var cb = document.getElementById("showdiv");
    cb.onclick = function() {  //would be better to add it with addEventListener
        document.getElementById("hello").style.display = cb.checked ? "block" : 'none';
    }
})();

Answer 3

您需要在元素上附加event-listener，在单击复选框时会触发您的代码。就像现在一样，您的代码会立即执行，此时不会选中复选框。

document.getElementById("showdiv").addEventListener("click", callback, false);

function callback() {
    if (document.getElementById("showdiv").checked)
       document.getElementById("hello").style.display = "inline";
}

DEMO

请注意，在IE9之前IE不支持addEventListener，因此对于旧版浏览器，您需要解决附加事件监听器的问题。（在上面引用的文章中描述）

Answer 4

应该是

document.getElementById("showdiv").onclick = function(){
    document.getElementById("hello").style.display = this.checked ? 'inline' : 'none'
}

演示：Fiddle

Answer 5

试试这个，用Fiddler测试

document.getElementById("showdiv").addEventListener("click", callback, false);

function callback() {
document.getElementById("showdiv").checked ? document.getElementById("hello").style.display = "inline" : document.getElementById("hello").style.display = "none";
}

Demo

.checked选项不适用于我的javascript

5 个答案: