javascript - 如何根据单击哪个单选按钮显示不同的文本框？

Question

我正在使用 JSP，我有一个 html 表单，其中顶部有一个按钮，它是 Process 按钮。现在，如果我点击那个 Process 按钮，它会显示一个有两个单选按钮的表单 - TestClient 和 TestServer。

在该表单中它还有 Submit 按钮。

这是我的 jsfiddle

问题陈述:-

现在我要做的是 - 只要我点击 TestClient 单选按钮，我想显示两个文本框和一个单选按钮以及 正下方的标签TestClient 和 TestServer 像这样 -

TestClient      TestServer

Name    textbox
Id      textbox
Sex     Male    Female

Submit button

以同样的方式，如果我单击 TestServer 按钮 - 我想在 TestClient 和 TestServer 下方显示三个文本框和一个下拉菜单

TestClient      TestServer

Address         textbox
ClientId        textbox
ServerId        textbox
Country         dropdownbox

Submit button

在我当前的 jsfiddle 示例中可以使用 jquery 吗？如果是，那么任何 jsfiddle 示例都会对我有很大帮助。

Answer 1

Very do-able.我刚刚添加了一个简单示例，每个单选按钮都有一个 div，其中包含一些文本。您可以添加自己的输入等。

默认使用 CSS 隐藏这些 div。

<div class="client" style="display: none">
    Client fields here
</div>

<div class="server" style="display: none">
    Server fields here
</div>

然后你可以用你的 jQuery 处理程序做这样的事情:

$('input[name="client"]').click(function() {
    if($(this).attr('id') == 'client') {
        $('.client').show();
        $('.server').hide();
    } else {
        $('.client').hide();
        $('.server').show();
    }
});