Question

我正在开发一个项目，我需要在其中创建一个带有几个单选按钮的HTML页面。

第一个单选按钮是INSERT。一旦我单击INSERT单选按钮，我想在INSERT单选按钮下面显示三个文本框。第一个文本框为datacenter，第二个文本框为node，第三个文本框为data。
第二个单选按钮是UPDATE。一旦我点击UPDATE单选按钮，我想在UPDATE单选按钮下方显示相同的三个文本框。
第三个单选按钮是DELETE。一旦我单击DELETE单选按钮，我想在DELETE单选按钮下面只显示一个文本框。在此文本框中将显示node。
第四个单选按钮是PROCESS。一旦我单击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;
    }
});

查看FIDDLE DEMO

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>

如何使用具有不同功能的多个单选按钮？

2 个答案: