使用 JavaScript 根据单选按钮的状态自动显示 div答案

【问题标题】：Automatically making a div appear based on status of radio button with JavaScript使用 JavaScript 根据单选按钮的状态自动显示 div
【发布时间】：2010-11-17 03:35:07
【问题描述】：

我有一个将数据发布到同一页面的表单。根据用户的单选按钮选择，我将 checked="checked" 插入单选按钮表单元素以重新显示正确的选择。这很好用，但是当重新显示表单时（如果输入错误等），我需要显示一个 div（包含表单中的相关字段）。

我有一个 onclick 事件，它首先显示 div（在用户发布表单之前），这工作正常，但是当我重新显示表单时，我不希望用户必须手动显示再次点击表单。

因此，我一直在尝试以下几行（为了这篇文章的目的而大幅削减）......

<link href="styles/style1.css" rel="stylesheet" type="text/css" />
 <script language="JavaScript"> 
  if (document.getElementById('complete_yes').checked) {
   document.getElementById('repair_complete').style.display = 'block';
   } else {
     document.getElementById('repair_complete').style.display = 'none';
  }
 </script>
 <form action="javascript_test.php" method="POST">
  <input id="complete_yes" type="radio" name="complete" checked="checked" value="true"/>Yes
  <input id="complete_no" type="radio" name="complete" value="false"/>No
  <input type="submit" value="Save">
   <div id="repair_complete">
    I'm a div!
   </div>

...但它返回一个 Object Required javascript 错误（就像在“真实”页面中所做的那样）：

消息：需要对象
线路：3
字符：1
代码：0
URI：http://localhost/repair_system/javascript_test.php

这是为什么？我没有正确引用表单元素吗？抱歉，如果我是一个“div”（故意的坏双关语！），我还没有了解 javascript 的乐趣和游戏！

【问题讨论】：

标签： javascript forms dom

【解决方案1】：

在加载文档时正在执行您的代码，并且 DOM 树还没有准备好。所以它试图访问一个还不存在的元素。

您可能希望编写一个事件处理程序，该处理程序在选中复选框时切换 div。

我更喜欢jQuery，它抽象出诸如跨浏览器事件处理之类的东西，提供了许多不错的帮助程序，并且通常使代码看起来更干净（如果编写得当）。像这样的东西应该可以工作：

$(document).ready(function() {
    $('#repair_complete').toggle($('#complete_yes').is(':checked'));
}

以上大致可以翻译为：

加载文档后，执行以下操作：
将“change”事件的事件处理程序添加到任何类型为“input”且名称为“complete”的元素
当事件处理程序触发时，切换 ID 为“repair_complete”的元素的可见性，如果选中了 ID 为“complete_yes”的元素，则它应该可见

更新：上面的 JS 现在实际上做了你想要的，最初我把它写成一个 onclick

【讨论】：

【解决方案2】：

听起来问题出在您的初始化代码中。在页面完成呈现之前调用 javascript。这是“onload”事件的一个令人讨厌的方面，在我看来，它根本无法在每个浏览器中正常工作。

有一种跨浏览器技术可以在 DOM 完全加载后调用一次初始化代码。

在 HTML 的 HEAD 中尝试此代码：

function showHelpDiv() {  
  if (document.getElementById('complete_yes').checked) {
   document.getElementById('repair_complete').style.display = 'block';
  } else {
   document.getElementById('repair_complete').style.display = 'none';
  }
}

function InitOnce()
{
    if (arguments.callee.done) return;
    arguments.callee.done = true;

    showHelpDiv();
}

/* for Mozilla */
if (document.addEventListener)
{
    document.addEventListener("DOMContentLoaded", InitOnce, null);
}

/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
        document.write("<script defer src=ie_onload.js><"+"/script>");
/*@end @*/

/* for other browsers */
window.onload = InitOnce;

然后您需要创建一个 ie_onload.js 文件，其中包含此行以实现 IE 兼容性：

InitOnce();

我尝试了其他技术，但没有一个比这更完美。我相信我最初在这里找到了这个解决方案： http://dean.edwards.name/weblog/2005/09/busted/

我在一个在线应用程序中使用它，每天大约有 500 次独立访问，这对我们来说是可靠的。

【讨论】：

【解决方案3】：

您应该使单选按钮的操作是更改 div 的可见性（即，将状态“推送”给它），而不是在渲染时通过单选按钮状态“拉” div 状态（正如 Andrejs 所说，它将被取消设置）。

【讨论】：

【解决方案4】：

在我看来，好像您的脚本在绘制表单之前就已触发，您可能希望将脚本块移动到表单元素之后。基本上我认为 document.getElementById('complete_yes').checked 正在查看 null.checked，这会触发 object required 错误。

【讨论】：

【解决方案5】：

因为您的 javascript 没有包装在函数中，所以浏览器会在“到达”时立即执行它。在这种情况下，JS 在浏览器到达声明表单的 html 之前执行。

因此，最简单的解决方法是将 Javascript 移到表单之后。一个更强大的解决方案是将您的代码包装在一个函数中，并以某种方式触发它 - 从您似乎想要做的事情来看，在这种情况下它将是 body 标签的 onLoad 事件：

<head>
<script language="JavaScript"> 
  function showHelpDiv() {  
    if (document.getElementById('complete_yes').checked) {
     document.getElementById('repair_complete').style.display = 'block';
    } else {
     document.getElementById('repair_complete').style.display = 'none';
    }
  }
</script>
</head>
<body onload="showHelpDiv()">
 <form action="javascript_test.php" method="POST">
  <input id="complete_yes" type="radio" name="complete" checked="checked" value="true"/>Yes
  <input id="complete_no" type="radio" name="complete" value="false"/>No
  <input type="submit" value="Save">
   <div id="repair_complete">
    I'm a div!
   </div>

【讨论】：

使用 onload 是一种相当标准的方法，但如果页面上有大量资源，它可能会导致呈现标记和触发脚本之间出现延迟。有关加载事件顺序的更多信息，请参阅stackoverflow.com/questions/473628/…。

【解决方案6】：

这是因为 Javascript 是在创建其余对象之前执行的。
将您的 javascript 代码放入函数体中，然后将此函数添加到 onclick 事件中以满足您的需要。

<link href="styles/style1.css" rel="stylesheet" type="text/css" />
<script language="JavaScript"> 
function test() {
  if (document.getElementById('complete_yes').checked) {
   document.getElementById('repair_complete').style.display = 'block';
   } else {
     document.getElementById('repair_complete').style.display = 'none';
  }
}
</script>
<form action="javascript_test.php" method="POST">
<input id="complete_yes" type="radio" name="complete" checked="checked" value="true" onClick="javascript: test();"/>Yes
<input id="complete_no" type="radio" name="complete" value="false" onClick="javascript: test();"/>No
<input type="submit" value="Save">
 <div id="repair_complete">
  I'm a div!
 </div>
</form>

【讨论】：