单选按钮和输入字段

Question

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

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

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

Answer 2

创建三个单选按钮，然后您的输入字段将输入字段设置为禁用。将一个JavaScript事件附加到调用JavaScript函数的第三个单选按钮。此功能将启用输入栏，允许用户输入自己的选项。您还应该将JavaScript事件添加到其他两个单选按钮，以禁用输入字段（如果它们被重新选择）。

Answer 3

嗯@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'); 
}