MVC 3 - 动态添加文本框

Question

我有一个sitution，用户可以选择他们想要输入信息的测试。 例子：

Test1 
Test2 
Test3 
Test4 

当选择Test1的说，Test3的，我需要创建只有这两个文本字段（测试1，Test2的）的形式。我正在考虑循环浏览用户选择的选项，然后做一个表演，通过jquery隐藏，但不知道这是否是最好的方式去做这件事。是否有一种显示用户选择的字段的优雅方式？

Answer 1

像这样的事情可能很简单：

<ul id="textboxes"> 
    <li> 
     <input type="checkbox" id="c1" name="c1" />     
     <input type="text" id="t1" name="t1" /> 
    </li> 
    <li> 
     <input type="checkbox" id="c2" name="c2" /> 
     <input type="text" id="t2" name="t2" style="display:none" /> 
    </li> 
<ul> 

那么你的jQuery：

$('input[type="checkbox"]').click(function() { 
    var id = $(this).attr('id').replace('c',''); 
    $('#t'+id).slideToggle(); 
}); 

很明显，你可以有更多的箱子那里。如果你要走一条更具活力的路线，而且拥有无限的路线，我会更加真实地添加这些字段。

jsFiddle

Answer 2

$(':checkbox').each(function(){ //loop through your checkboxes 

    if($(this).prop('checked')) { //if the current checkbox is checked 

     var text = $(this).text(); //Test1, Test2 or whatever it might be. Would probably be better to store as a data-attribute on the checkbox 

     var $textfield = $('<input/>').attr({ type: 'text' }).val(text); //generate a textfield with the selected text from the checkbox 

     $('#yourForm').append($textfield); //add textfield to the form 
    } 

    $('#yourForm').show(); 

});