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 Authorをクリックすると、「Author name」という見出しの付いた1つの入力テキストフィールドと、「Gender」という見出しの付いた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 に答える