在更改时动态打印输入字段和单选按钮

Question

问题:我想请求帮助，如何根据您之前对单选按钮所做的选择来包含输入字段和单选按钮。

jQuery代码：

<script src="./js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
    {
        $("input[name='authors']").change(function()
        {
            if(this.checked) 
            {
                if(this.value == 1) 
                {
                    $("#choice-1").show();
                    $("#choice-2").hide();
                }
                else if (this.value == 2)
                {
                    $("#choice-2").show();
                    $("#choice-1").hide();
                }
            }
        }
    });
</script>

HTML代码：

<label class="radio"><input type="radio" name="authors" id="authors" value="1">1 author</label> 
<label class="radio"><input type="radio" name="authors" id="authors" value="2">2 authors</label>

<div id="choice-1" style="display: none;">

    <label class="control-label">Gender:</label>

    <label class="radio"><input type="radio" name="FirstGender" id="FirstGender" value="1">Man</label>
    <label class="radio"><input type="radio" name="FirstGender" id="FirstGender" value="2">Woman</label>

</div>

<div id="choice-2" style="display: none;">

    <label class="control-label">Gender:</label>
    <label class="radio"><input type="radio" name="FirstGender" id="FirstGender" value="1">Man</label> 
    <label class="radio"><input type="radio" name="FirstGender" id="FirstGender" value="2">Woman</label>

    <label class="control-label">Gender:</label>
    <label class="radio"><input type="radio" name="SecondGender" id="SecondGender" value="1">Man</label> 
    <label class="radio"><input type="radio" name="SecondGender" id="SecondGender" value="2">Woman</label>

</div>

所需功能:如果我单击单选按钮1作者，则应生成1个输入文本字段，其中包含一个标题“作者姓名”和2个单选按钮(男性/女性)，标题为“性别”。类似的方法也适用于2个作者(参见代码中的注释)。

提前感谢！

Answer 1

$("input[name='authors']").change(function() {

    $('div[id^=choice]').hide();
    $('div#choice-' + this.value).show();

});

Answer 2

您可以将它们放在html中，并将它们包装在隐藏的div中。

<div id="choice-1" style="display: none>
   <!--your inputs for first choice -->
</div>


<div id="choice-2" style="display: none>
   <!--your inputs for second choice -->
</div>

if ($("input[name='authors']:checked").val() == '1') {
   $("#choice-1").show();
   $("#choice-2").hide();
} else if ($("input[name='authors']:checked").val() == '2') {
   $("#choice-2").show();
   $("#choice-1").hide();
}

Answer 3

如果您想要动态添加输入字段和单选按钮，如下所示：

var input = $('<input type="text">'),
    radio = $('<input type="radio">'),
    label = $('<label>'),
    output = $('#output'),
    authorLabel = label.clone().html('Author').appendTo(output),
    author = input.clone().attr('id','author').appendTo(output),
    rdmLabel = label.clone().html('Male').appendTo(output),
    rdm = radio.clone().attr({'name':'gender',value:'M'}).appendTo(output)
    rdfLabel = label.clone().html('Female').appendTo(output),
    rdf = radio.clone().attr({'name':'gender',value:'F'}).appendTo(output);