Javascript 生成HTML表单_Javascript_Innerhtml_Radio

Javascript 生成HTML表单

javascript

Javascript 生成HTML表单,javascript,innerhtml,radio,Javascript,Innerhtml,Radio,我正在尝试使用HTML表单和一些JavaScript执行以下操作：选中该复选框时，会动态生成两个单选按钮，并显示“选中复选框1”的文本该逻辑（见JSFIDLE:）确实有效，但由于某些原因，无法选择这两个单选按钮。当我点击任意一个单选按钮时，什么也没发生。如果你们中的任何人能对我可能做错的事情提供一些意见，我将不胜感激注意：序列在JSFIDLE上似乎不起作用（单选按钮确实是动态生成的），但在我的工作站上起作用 HTML代码： <form name="input" action="" m

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

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

该逻辑（见JSFIDLE:）确实有效，但由于某些原因，无法选择这两个单选按钮。当我点击任意一个单选按钮时，什么也没发生。如果你们中的任何人能对我可能做错的事情提供一些意见，我将不胜感激

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

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>


复选框1

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

函数displaySequence（）{
var displayVariableExhOptions=“”；
var displayText=“”；
如果（顺序OP14.选中）{
displayText+=“复选框1已选中”；
displayVariableExhOptions+=“”
+“无线电信箱1
”
+ ""
+“无线电信箱2
”
}
document.getElementById（“variableSpdExhOptions”）.innerHTML=displayVariableExhOptions；
document.getElementById（“displayText”）.innerHTML=displayText；
}

以下是您的问题的修复方法：

基本上，错误在于您的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>


//
复选框1

为了避免您担心ID，请让自己轻松一点：

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

  function ds(obj) {

            var displayVariableExhOptions = "";
            var displayText = "";
            if (obj.checked) {


功能ds（obj）{
var displayVariableExhOptions=“”；
var displayText=“”；
如果（对象已选中）{

以下是您的问题的修复方法：

基本上，错误在于您的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>


//
复选框1

为了避免您担心ID，请让自己轻松一点：

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

  function ds(obj) {

            var displayVariableExhOptions = "";
            var displayText = "";
            if (obj.checked) {


功能ds（obj）{
var displayVariableExhOptions=“”；
var displayText=“”；
如果（对象已选中）{

在这里，您尚未访问DOM。您需要使用

document.getElementById（“sequenceOP14”）

在这里，您尚未访问DOM。您需要使用

document.getElementById（“sequenceOP14”）

您的“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;
    }
}

函数显示顺序（htmlCheckableElement）{
if（typeof（htmlCheckableElement）=“未定义”）
返回；
var displayVariableExhOptions=“”；
var displayText=“”；
if（htmlCheckableElement.checked）{
displayText+=“复选框1已选中”；
displayVariableExhOptions+=“”
+“无线电信箱1
”
+ ""
+“无线电信箱2
”
}
document.getElementById（“variableSpdExhOptions”）.innerHTML=displayVariableExhOptions；
document.getElementById（“displayText”）.innerHTML=displayText；
}
}

您的“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;
    }
}

函数显示顺序（htmlCheckableElement）{
if（typeof（htmlCheckableElement）=“未定义”）
返回；
var displayVariableExhOptions=“”；
var displayText=“”；
if（htmlCheckableElement.checked）{
displayText+=“复选框1已选中”；
displayVariableExhOptions+=“”
+“无线电信箱1
”
+ ""
+“无线电信箱2
”
}
document.getElementById（“variableSpdExhOptions”）.innerHTML=displayVariableExhOptions；
document.getElementById（“displayText”）.innerHTML=displayText；
}
}

我可能错了，但是如果是表单，最好的操作不是document.formname.elementname.value还是.checked？我可能错了，但是如果是表单，最好的操作不是document.formname.elementname.value还是.checked？谢谢js fiddle的帮助。我没有看到“onLoad”很高兴我能提供帮助！嗨，LmC，谢谢你的输入，但不幸的是，你的代码与我的代码做的是相同的事情。这两个单选按钮确实是生成的，但它们是不可选择的，这就是我的问题所在。嗨，很抱歉在这里这样做，但它似乎对我的JS提琴（在Chrome/Firefox中测试）非常适合没有escape char就这样了没有必要了谢谢js fiddle的帮助我没有看到“onLoad”很高兴我能提供帮助！嗨，LmC，谢谢你的输入，但不幸的是，你的代码与我的代码做的是相同的事情。这两个单选按钮确实是生成的，但它们是不可选择的，这就是我的问题所在。嗨，很抱歉在这里这样做，但它似乎对我的JS提琴（在Chrome/Firefox中测试）非常适合这是没有转义字符的，不需要它们。为什么当你的if语句只勾选复选框时，你的单选按钮会有变化？为什么当你的if语句只勾选复选框时，你的单选按钮会有变化？LmC的答案帮助了我。+1为你的努力，而LmC的答案帮助了我。+1为你的努力奥夫