MVC 3 - 动态添加文本框

时间:2012-09-27 18:49:54

标签: jquery asp.net-mvc-3

我有一个情况,用户可以选择他们想要输入信息的测试。 例如:

Test1
Test2
Test3
Test4

当选择说Test1,Test3时,我需要创建一个只包含这两个文本框字段的表单(Test1,Test2)。我正在考虑循环用户选择的选项,然后做一个节目,通过jquery隐藏但不确定这是否是解决此问题的最佳方式。是否有一种优雅的方式来显示用户选择的字段?

2 个答案:

答案 0 :(得分:0)

$(':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();

});

答案 1 :(得分:0)

这样的事情可能很简单:

<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