单选按钮和输入字段

Posted 2023-03-05

【中文标题】单选按钮和输入字段

【英文标题】：Radio Button and an Input field

【发布时间】：2011-05-18 09:21:14

【问题描述】：

我想设置一个表单，用户可以在其中从一组单选按钮中进行选择，如果他们不喜欢任何选择，他们可以使用最后一个单选按钮，该按钮将有一个文本字段，他们可以在其中输入自定义文本。

我在一些网站上看到过这个。只是想知道它是在哪里以及如何实现的

【参考方案1】：

我给你做了个例子，这是你想要的吗？ http://www.jsfiddle.net/T7gE7/

var temp = '';
function disableTxt() 
    var field = document.getElementById("other");
    if(field.value != '') 
        temp = field.value;
    
    field.style.display = "none";
    field.value = '';

function enableTxt() 
    document.getElementById("other").style.display = "inline";
    document.getElementById("other").value = temp;

【讨论】：

我又摆弄了一些，我觉得这样更整洁jsfiddle.net/T7gE7/4

【参考方案2】：

hmmm @Dai 比我快 :P... 但无论如何，这是一种使用 Mootools 做同样事情的非侵入性方式（如果你不想混合 js 和 html 代码）

http://jsfiddle.net/raKbZ/1/

$('radio4').addEvent('change',function(E)
    if(E.target.checked)
        enableInput();
    
);

$$('.normal').each(function(radio)
    radio.addEvent('change',function(E)
         if(E.target.checked)
             disableInput();
         
    );
);


function enableInput()
    $('other').set('disabled','');
    $('other').setStyle('background-color','#fff');


function disableInput()
    $('other').set('disabled','disabled');
    $('other').setStyle('background-color','#d4d4d4');

【参考方案3】：

创建三个单选按钮和您的输入字段，然后将输入字段设置为禁用。将 javascript 事件附加到调用 javascript 函数的第三个单选按钮。然后，此功能将启用输入字段，允许用户输入自己的选项。您还应该将 javascript 事件添加到其他两个单选按钮，以在重新选择时禁用输入字段。