0

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

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 位作者（参见代码中的注释）。

提前致谢！

4

3 回答 3

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

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

});

演示

于 2012-05-29T17:36:44.987 回答
0

您可以将它们放在 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();
}
于 2012-05-29T17:34:49.767 回答
0

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

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);
于 2012-05-29T17:45:10.573 回答