在选择单选按钮时绘制窗体

Drawing a form when a radio button is selected

本文关键字：绘制 窗体 单选按钮 选择      更新时间：2023-09-26

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

你使用了错误的语法，它必须是 doucment 而不是内容。

取代 

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

跟

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

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

表单的网页：

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

使用 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
});
相关文章：