javascript - 选择单选按钮时绘制表单

Question

我有一个表格，上面有一些选项。我想根据单击的内容绘制一个新表单。我是 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>

Answer 1

您使用了错误的语法，它必须是文档而不是内容..

代替

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

和

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

Answer 2

这是一个避免使用 jQuery 的解决方案，它会根据需要隐藏您的表单。工作 jsFiddle 供您参考： http: //jsfiddle.net/vwnP6/1/：

表单的 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：

// 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();

Answer 3

使用 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
});