如何使多个具有不同功能的单选按钮? [英] How to have multiple radio buttons with different functionality?

问题描述

我正在一个项目中，我需要制作一个带有几个单选按钮的HTML页面.

I am working on a project in which I need to make an HTML page with couple of radio buttons.

• 第一个单选按钮为INSERT.单击INSERT单选按钮后，我想在INSERT单选按钮下面显示三个文本框.第一个文本框为datacenter，第二个文本框为node，第三个文本框为data.
• 第二个单选按钮是UPDATE.单击更新"单选按钮后，我想在更新"单选按钮下面的三个文本框上方显示相同的内容.
• 第三个单选按钮是DELETE.单击删除单选按钮后，我只想在删除单选按钮下方仅显示一个文本框.在此文本框中将是node.
• 第四个单选按钮为PROCESS.单击过程"单选按钮后，我想在过程"单选按钮下方显示四个文本框.在此第一个文本框为datacenter，第二个文本框为node，第三个文本框为conf，第四个文本框为data.

• First radio button is, INSERT. As soon as I click INSERT radio button, I would like to show three text box just below the INSERT radio button. First textbox is datacenter, second textbox is node and third textbox is data.
• Second radio button is, UPDATE. As soon as I click UPDATE radio button, I would like to show same above three text box just below the UPDATE radio button.
• Third radio button is, DELETE. As soon as I click DELETE radio button, I would like to show only one text box just below the DELETE radio button. In this one text box will be node.
• Fourth radio button is, PROCESS. As soon as I click PROCESS radio button, I would like to show four text box just below the PROCESS radio button. In this first textbox will be datacenter, second textbox will be node, third textbox will be conf and fourth textbox will be data.

我能够使前两个单选按钮工作(插入和更新)，但是以某种方式我无法理解如何使后两个单选按钮工作.

I am able to make first two radio button work (insert and update) but somehow I am not able to understand how do I make last two radio button work.

下面是我的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-

Below is my 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示例，那将有很大的帮助?

And here is my jsfiddle. It will be of great help if anyone can provide any jsfiddle example?

推荐答案

在javascript部分尝试此代码，

try this code in javascript part,

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

请参阅演示

SEE FIDDLE DEMO

这篇关于如何使多个具有不同功能的单选按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！