如何拥有具有不同功能的多个无线电按钮

Question

我正在研究一个项目，我需要在其中制作一个带有几个无线电按钮的HTML页面。

• 第一个广播按钮是INSERT。一旦我单击插入广播按钮，我想在"插入广播"按钮下方显示三个文本框。第一个文本框是datacenter，第二个文本框是node，第三个文本框是data。
• 第二个广播按钮是UPDATE。一旦单击"更新广播"按钮，我想在更新广播按钮下方的三个文本框上方显示相同的上方。
• 第三个广播按钮是DELETE。一旦单击删除广播按钮，我想仅在删除广播按钮下方显示一个文本框。在这个文本框中是node。
• 第四个广播按钮是PROCESS。一旦我单击" Process广播"按钮，我想在"进程无线电"按钮下方显示四个文本框。在第一个文本框中是datacenter，第二个文本框将是node，第三个文本框将是conf，第四个文本框将是data。

我能够进行前两个广播按钮工作（插入和更新），但是我无法理解如何使最后两个广播按钮工作。

下面是我的html

<form method="post" action="testOperation">
    <input type="hidden" name="name" id="dynamicName">
    <input class="changeAction" type="radio" name="tt" value="Insert" div-id="insert"/> Insert
    <div id="insert" class="changeable"></div>
    <br/> <input class="changeAction" type="radio" name="tt" value="Update" div-id="update"/> Update
    <div id="update" class="changeable"></div>
    <br/>
    <input type="submit">
</form>

下面是我的jQuery-

$(document).ready(function(){
    $(".changeAction").on("click", function(){
        $('.changeable').html('')
        var divId = $(this).attr("div-id");
        $("#dynamicName").val(divId);
        divId = "#"+divId;
        var myInput = '<label for="Datacenter"> Datacenter </label> <input type="text" name="datacenter" size="20" />  <label for="Node"> Node </label> <input type="text" name="node" size="20" /> <label for="Data"> Data </label> <input type="text" name="data" size="100"/>'
        $(divId).html(myInput);
    })
})

这是我的jsfiddle。如果有人可以提供任何JSFIDDLE示例，这将有很大的帮助？

Answer 1

在JavaScript零件中尝试此代码，

var datacenter = '<label for="Datacenter"> Datacenter </label> <input type="text" name="datacenter" size="20" />';
var node = '<label for="Node"> Node </label> <input type="text" name="node" size="20" />';
var data = '<label for="Data"> Data </label> <input type="text" name="data" size="100"/>';
var config = '<label for="Config"> Config </label> <input type="text" name="config" size="100"/>';
$(".changeAction").on("click", function () {
    var divId = $(this).attr("div-id");
    $('.changeable').html('');
    $("#dynamicName").val(divId);
    switch (divId) {
        case 'insert':
            //insert stuff goes here!!
            divId = "#" + divId;
            var myInput = datacenter + node + data;
            $(divId).html(myInput);
            break;
        case 'update':
            //update stuff goes here!!
            divId = "#" + divId;
            var myInput = datacenter + node + data;
            $(divId).html(myInput);
            break;
        case 'Delete':
            //Delete stuff goes here!!
            divId = "#" + divId;
            var myInput = node;
            $(divId).html(myInput);
            break;
        case 'process':
            //process stuff goes here!!
            divId = "#" + divId;
            var myInput = datacenter + node + config + data;
            $(divId).html(myInput);
            break;
    }
});

请参阅小提琴演示

Answer 2

将您的HTML代码更改为此

        <input class="changeAction" type="radio" name="tt" value="Insert" div-id="insert"/> Insert
    <div id="insert" class="changeable"></div>
    <br/> <input class="changeAction" type="radio" name="tt" value="Update" div-id="update"/> Update
    <div id="update" class="changeable"></div><br/>
    <input class="changeAction" type="radio" name="tt" value="Delete" div-id="delete"/> Delete
    <div id="delete" class="changeable"></div>
    <br/> <input class="changeAction" type="radio" name="tt" value="Process" div-id="process"/> Process
    <div id="process" class="changeable"></div>
        <br/>
    <input type="submit">
</form>