1

我正在尝试使用 HTML 表单和一些 JavaScript 执行以下操作：

一个复选框，选中时会动态生成两个单选按钮和一个显示“复选框 1 已选中”的文本。

逻辑（见 jsFiddle： http: //jsfiddle.net/9jPcP/）确实有效，但由于某种原因，无法选择两个单选按钮。当我单击任一单选按钮时，什么都没有发生。如果你们中的任何人对我可能做错的事情有一些意见，我将不胜感激。

注意：该序列在 jsFiddle 上似乎不起作用（单选按钮确实是动态生成的），但它在我的工作站上确实有效。

HTML 代码：

<form name="input" action="" method="get">
<input type="checkbox" name="sequenceOP" id="sequenceOP14" onChange="displaySequence()">
Checkbox 1<br/>
<div id="displayText"></div>
<div id="variableSpdExhOptions"></div>
</form>

JavaScript：

function displaySequence(){
var displayVariableExhOptions = "";
var displayText = "";
if(sequenceOP14.checked){
displayText += "Checkbox 1 is checked";
displayVariableExhOptions += "<input type=\"radio\" name=\"exhOptions\" id=\"sequenceOP15\" onChange=\"displaySequence()\" >"
+ "Radio Box 1<br/>"
+ "<input type=\"radio\" name=\"exhOptions\" id=\"sequenceOP16\" onChange=\"displaySequence()\" >"
+ "Radio Box 2<br/>"
}
document.getElementById("variableSpdExhOptions").innerHTML = displayVariableExhOptions;
document.getElementById("displayText").innerHTML = displayText;
}
4

3 回答 3

3

这是解决您的问题的方法：Fix JS Fiddle。

基本上问题是你的 JS 被加载到 domReady 上然后丢弃。

您希望将其加载到头部。

代码在这里：

<head>
    <script type="text/javascript">
        //<![CDATA[ 

        function ds() {

            var displayVariableExhOptions = "";
            var displayText = "";
            if (document.input.sequenceOP14.checked) {
                displayText += "Checkbox 1 is checked";
                displayVariableExhOptions += "<input type=\"radio\" name=\"exhOptions\" id=\"sequenceOP15\" onChange=\"displaySequence()\" >" + "Radio Box 1<br/>" + "<input type=\"radio\" name=\"exhOptions\" id=\"sequenceOP16\" onChange=\"displaySequence()\" >" + "Radio Box 2<br/>"
            }
            document.getElementById("variableSpdExhOptions").innerHTML = displayVariableExhOptions;
            document.getElementById("displayText").innerHTML = displayText;
        }
    </script>
</head>

<form name="input" action="" method="get">
<input type="checkbox" name="sequenceOP" id="sequenceOP14" onChange="ds();">
Checkbox 1<br/>
<div id="displayText"></div>
<div id="variableSpdExhOptions"></div>
</form>

为了省去你对 id 的担心，让你自己更容易一些：

<input type="checkbox" name="sequenceOP" id="sequenceOP14" onChange="ds(this);">

  function ds(obj) {

            var displayVariableExhOptions = "";
            var displayText = "";
            if (obj.checked) {
于 2013-05-23T14:40:55.407 回答
2 
if(sequenceOP14.checked){

在这里，您还没有访问 DOM。你需要使用document.getElementById("sequenceOP14")

于 2013-05-23T14:42:06.450 回答
1

你的“sequenceOP14”来自哪里？

您需要将复选框传递给您的 javascript 函数，如下所示：

<input type="checkbox" name="sequenceOP" id="sequenceOP14" onChange="displaySequence(this)">

然后在你的javascript函数中：

function displaySequence(htmlCheckableElement){
    if(typeof(htmlCheckableElement) == "undefined")
        return;
    var displayVariableExhOptions = "";
    var displayText = "";
    if(htmlCheckableElement.checked){
        displayText += "Checkbox 1 is checked";
        displayVariableExhOptions += "<input type=\"radio\" name=\"exhOptions\"                         id=\"sequenceOP15\" onChange=\"displaySequence()\" >"
        + "Radio Box 1<br/>"
        + "<input type=\"radio\" name=\"exhOptions\" id=\"sequenceOP16\" onChange=\"displaySequence()\" >"
        + "Radio Box 2<br/>"
        }
        document.getElementById("variableSpdExhOptions").innerHTML = displayVariableExhOptions;
        document.getElementById("displayText").innerHTML = displayText;
    }
}
于 2013-05-23T14:48:38.100 回答