Question

我有一个包含3个输入的表单：

名称
电子邮件
公司

我还有两个用户必须选择的单选按钮：

A
乙

如果用户选择A，请保持表单字段不变。如果用户选择B，则更改输入字段的描述。

默认情况下，表单加载为A。

name =我们想要你的（姓名），公司=我们想要你的（公司），电子邮件=我们想要你的（电子邮件）

如何更改单选按钮值以更新文本输入字段？

Answer 1

我已经设置了jsfiddle作为此技巧的示例。您要做的是使用两个单选按钮制作普通表单，并将onChange事件绑定到它们，这样每当您单击单选按钮时，它会触发检查以查看单击了哪个单选按钮，并对表单/标记进行更改围绕着它。

示例JS：

$(document).ready(function(){
$("input[name='option']").live("change", function(){
    if ($(this).val() == "A") {
         $("input.first-input").attr("name", "name");
         $("input.first-input").siblings("span").text("name:");  
         $("input.second-input").attr("name", "company");
         $("input.second-input").siblings("span").text("company:");  
         $("input.third-input").attr("name", "email");
         $("input.third-input").siblings("span").text("email:");                   
    }
    else if ($(this).val() == "B") {
         $("input.first-input").attr("name", "color");
         $("input.first-input").siblings("span").text("color:");  
         $("input.second-input").attr("name", "width");
         $("input.second-input").siblings("span").text("width:");  
         $("input.third-input").attr("name", "height");
         $("input.third-input").siblings("span").text("height:");              
    }
});

}）;

测试HTML：

<input type="radio" name="option" value="A" checked="checked" /> A -- <input type="radio" name="option" value="B" /> B
<br />
<br />
<label><span>name:</span> <input type="text" name="name" class="first-input" /></label><br />
<label><span>company:</span> <input type="text" name="company" class="second-input" /></label><br />
<label><span>email:</span> <input type="text" name="email" class="third-input" /></label><br />

根据所选的单选按钮更改文本输入名称

1 个答案: