javascript - .checked 选项不适用于我的 javascript

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

您需要将事件侦听器附加到元素，当单击复选框时触发您的代码。就像现在一样，您的代码会立即执行，此时不会选中复选框。

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

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

演示

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

Answer 3

添加点击事件的代码在哪里？浏览器不理解应该运行 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 4

它应该是

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

演示：小提琴

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";
}

演示