1 
<html>
   <head>
      <script type="text/javascript">
         function hideshow(which){
            if (!document.getElementById)
               return
            if (which.style.display=="block")
               which.style.display="none"
            else
               which.style.display="block"
         }
      </script>
   </head>
   <body>
     credit card
     <a href="javascript:hideshow(document.getElementById('adiv123'))">
        <input type="checkbox"  />
     </a>   
     <div id="adiv123" style="font:24px normal; style=display:block;">
        check
           <input type="text" name="check" class="styled"/>
     </div>
   </body>
</html>

程序的输出必须是：当我们选中复选框时它应该显示文本，当复选框未选中时应该隐藏文本。在这种情况下，当我们第一次打开输出时，没有选中复选框就显示了文本。谁能澄清为什么会这样？

4

3 回答 3

1

发生这种情况是因为您在单击复选框之前不会运行该hideshow函数（为什么将其包装到链接中？）。因此，在页面加载之后，总是显示相邻的 div，而不管复选框元素的状态如何。

无论如何，如果您不支持 IE8 及以前的版本，您可以仅使用 css 实现相同的行为。例如

html

<input type="checkbox"  />
<fieldset>
    <span>checked</span>
    <input type="text" name="check" class="styled"/>
</fieldset>

CSS

input + fieldset { display: none }
input:checked + fieldset { display: block }
于 2013-06-04T07:48:12.397 回答
0

好吧，对于初学者来说，您的标记是无效的。具体来说，这个：

style="font:24px normal; style=display:block;"

是错的。我想你的意思是：

style="font:24px normal; display:block;"

如果你想在页面加载时隐藏元素，你实际上想要这个：

style="font:24px normal; display:none;"
于 2013-06-04T07:46:19.687 回答
0

看看这里：http: //jsfiddle.net/Uhcxd/

代码

document.getElementById("adiv123").style.display = "none";
document.getElementById("showHide").onchange = function(){
    if(this.checked)
         document.getElementById("adiv123").style.display = "block";
    else
        document.getElementById("adiv123").style.display = "none";
}

或者，根据您的代码：http: //jsfiddle.net/Uhcxd/1/

我改变了这个：

<div id="adiv123" style="font:24px normal; style=display:block;">

对此

<div id="adiv123" style="font:24px normal;display:none;">
于 2013-06-04T07:47:59.760 回答