Javascript 选择单选按钮时绘制表单

我有一张表格，上面有一些选项。我想画一个新的形式，这取决于被点击。 我是Javascript新手，所以我知道我做得不对，但我似乎找不到正确的方法来做这件事。 这是我的密码

<form>
        <input type="radio" name="postTo" id = "facebook" value="Facebook" checked="checked"/>Facebook
        <input type="radio" name="postTo" id = "twitter" value="Twitter"/>Twitter
        <input type="radio" name="postTo" id = "tumblr" value="Tumblr"/>Tumblr
        <input type="radio" name="postTo" id = "instagram" value="Instagram"/>Instagram
    </form>
    <script>
    if (content.getElementById('facebook').checked)
    {

    }
    else if (content.getElementById('twitter').checked)
    {

    }
    else if (content.getElementById('tumblr').checked)
    {
        <form name="newPostTumblr" action="" method="">
        <h2>Tumblr</h2>
        <p><label for="postTitle">Title:</label> <input type="text" id="postTitle" /></p>
        <p><label for="postContent">Content:</label> <input type="text" id="postContent" /></p>
        </form>

脸谱网
啁啾
Tumblr
一款图片分享应用
if（content.getElementById（'facebook'）。选中）
{
}
else if（content.getElementById（'twitter'）。选中）
{
}
else if（content.getElementById（'tumblr'）。选中）
{
Tumblr
标题：

内容：

您使用了错误的语法，它必须是doucment而不是content

更换

if (content.getElementById('facebook').checked)

与

if (document.getElementById('facebook').checked)
----^^^^^^^^

使用jQuery：

if ($("#facebook").attr("checked") == true) { // checks if the attribute "checked" is true
    $("#form").show(); // displays the element: http://api.jquery.com/show/
} else {
    $("#form").hide(); // hides the element. http://api.jquery.com/hide/
}

上述代码应在检测到单击事件时执行。您可以在以下代码中使用它：

$("#facebook").click(function() {
    // execute code here
});

---

下面是一个避免jQuery在必要时隐藏表单的解决方案

表格的HTML格式：

<form>
    <input type="radio" name="postTo" id = "facebook" value="Facebook" checked="checked"/>Facebook
    <input type="radio" name="postTo" id = "twitter" value="Twitter"/>Twitter
    <input type="radio" name="postTo" id = "tumblr" value="Tumblr"/>Tumblr
    <input type="radio" name="postTo" id = "instagram" value="Instagram"/>Instagram
</form>
<form id="facebookForm" action="" method="">
    <h2>Facebook</h2>
    <p><label for="postTitle">Title:</label> <input type="text" id="postTitle" /></p>
    <p><label for="postContent">Content:</label> <input type="text" id="postContent" /></p>
</form>
<form id="twitterForm" action="" method="">
    <h2>Twitter</h2>
    <p><label for="postTitle">Title:</label> <input type="text" id="postTitle" /></p>
    <p><label for="postContent">Content:</label> <input type="text" id="postContent" /></p>
</form>
<form id="tumblrForm" action="" method="">
    <h2>Tumblr</h2>
    <p><label for="postTitle">Title:</label> <input type="text" id="postTitle" /></p>
    <p><label for="postContent">Content:</label> <input type="text" id="postContent" /></p>
</form>
<form id="instagramForm" action="" method="">
    <h2>Instagram</h2>
    <p><label for="postTitle">Title:</label> <input type="text" id="postTitle" /></p>
    <p><label for="postContent">Content:</label> <input type="text" id="postContent" /></p>
</form>

---

对于Javascript及其与HTML的关系存在着比从DOM访问表单的位置更大的误解。谢谢，尽管不是我所需要的一切。@DipeshParmar我需要一种在选中单选按钮时显示表单的方式。我想避免使用jQuery。@TravisMcKee我很忙，这就是为什么我给你考试的原因ple代码…您只需将警报替换为表单…替换为

document.write（'facebook'）

用于facebook电台选择等@DipeshParmar但jQuery是JavaScript，并且没有指定是否不能使用jQuery。他的原始解决方案没有使用jQuery，因此jQuery没有标记。但是如果OP为jQuery打开，那么他一定添加了它……对吧？@DipeshParmar我不确定他是否知道jQuery，因为他提到了他是一个新手。有没有一个非jQuery的例子？我将把我的表单放在哪里？我将如何隐藏它？@TravisMcKee你将把你的表单放在一个id为“form”的类中。如果你想一开始就隐藏它，请使用

.hide（）

function.jQuery不是必需的，但它让生活更轻松。嘿，特拉维斯，我不想发布答案，我只想就如何重新思考您试图解决的问题提出一些建议，我在答案部分看到了答案。首先，将HTML视为Javascript操作的站点的框架。它独立于JavaScript和它的代码。因此，可以在HTML中打印表单，并使用JavaScript来显示和隐藏表单的ID。属性，一个la，但注意：似乎可以在JSFIDLE上使用。但是我无法让它在代码中使用。它会在网页上显示所有这些内容。您的代码的完全复制粘贴，什么都没有。如果我能得到关于为什么不显示的帮助的回复，那就太好了。我确实参考了样式表。嘿，Travis，Javascript必须在后面执行呃，HTML已经呈现。尝试以下两件事：1）将代码放入

// Our various radio buttons
// We can define these globally since that's how Javascript works
// Would be better to have this all encapsulated into its own "class" to keep namespace clean
var facebook_radio = document.getElementById('facebook');
var twitter_radio = document.getElementById('twitter');
var tumblr_radio = document.getElementById('tumblr');
var instagram_radio = document.getElementById('instagram');

function hideElement(element) {
    element.style.display = "none";
    element.style.visibility = "hidden";
}

function showElement(element) {
    element.style.display = "block";
    element.style.visibility = "visible";
}

function changeForm() {
    /* Hide all forms and show desired form based on checked radio button */

    // Our form elements
    var facebook_form = document.getElementById("facebookForm");
    var twitter_form = document.getElementById("twitterForm");
    var tumblr_form = document.getElementById("tumblrForm");
    var instagram_form = document.getElementById("instagramForm");

    // Hide all of our forms
    hideElement(facebook_form);
    hideElement(twitter_form);
    hideElement(tumblr_form);
    hideElement(instagram_form);

    // Show appropriate form
    if (facebook_radio.checked)
    {
        showElement(facebook_form);
    }
    else if (document.getElementById('twitter').checked)
    {
        showElement(twitter_form);
    }
    else if (document.getElementById('tumblr').checked)
    {
        showElement(tumblr_form);
    }
    else if (document.getElementById('instagram').checked)
    {
        showElement(instagram_form);   
    }
}
// When you select a radio button, you want to change to correct form
facebook_radio.onchange = changeForm;
twitter_radio.onchange = changeForm;
tumblr_radio.onchange = changeForm;
instagram_radio.onchange = changeForm;
// Show first checked form
changeForm();