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

小编典典

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

jsp

我正在一个项目中，我需要用几个单选按钮制作一个HTML页面。

第一个单选按钮是INSERT。单击INSERT单选按钮后，我想在INSERT单选按钮下面显示三个文本框。第一个文本框是datacenter，第二个文本框是node，第三个文本框是data。
第二个单选按钮是UPDATE。单击UPDATE单选按钮后，我想在UPDATE单选按钮下面的三个文本框上方显示相同的内容。
第三个单选按钮是DELETE。单击删除单选按钮后，我只想在删除单选按钮下方仅显示一个文本框。在这个文本框中将是node。
第四个单选按钮是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示例，将会有很大的帮助？

阅读 262

2020-06-10

共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;
    }
});

查看现场演示

2020-06-10