Question

我正在使用JSP，我有一个html表单，其中我在顶部有一个按钮，它是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();
    }
});

Answer 2

如果你不想编码html并显示/隐藏它，但你更喜欢用jquery生成它，你也可以使用这个解决方案：

http://jsfiddle.net/fauv9/1/

<button id="primary">Process</button>
<form method='post'>
  <h4>Process</h4>
    <fieldset><legend>process</legend>
      <input  id="client" value="TestClient"type="radio" name="cli_srv">
      <label for="client">TestClient</label>
      <input  id="server" value="TestServer" type="radio" name="cli_srv">
      <label for="server">TestServer</label>
    </fieldset>
    <fieldset id="form_process">
    </fieldset>
</form>
    <button form="form_process">Submit</button>

和

$("#primary").click(function(){
    $("form").show()
});

var form= $('#form_process');

$("#client").click(function(){
    form.html(null);
    form.append('<label for="cli_name">name</label><input value="name" id="cli_name"><br>')
    form.append('<label for="cli_id">id</label><input value="id" id="cli_id"><br>')
// etc...
})

$("#server").click(function(){
    form.html(null);
    form.append('<label for="cli_name">address</label><input value="address" id="address"><br>')
    form.append('<label for="srv_id">id</label><input value=" server id" id="srv_id"><br>')
// etc...
})

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

2 个答案: