0

この関数でテキスト ボックス要素を表示/非表示にしようとしています。これまでのところ、私はほとんど運がありませんでした。選択したラジオオプションでスタイルを表示または保留しないように設定して、要素を表示および非表示にする方法を誰か教えてもらえますか? これが私がこれまでに持っているものです。

スクリプト

            function hide(id)
            {
                document.getElementById(id).style.visibility='hidden';
            }

            function show(id)
            {
                document.getElementById(id).style.visibility='visible'; 
            }

html

            <div data-role="fieldcontain" data-theme="c" id="quests'+id+'">
            <fieldset data-role="controlgroup" data-type="horizontal">
            <label>Question?</label>

            <input type="radio" name="radio1" id="'+QuestionID+'_1" value="1" onClick="show("comment_'+QuestionID+'")"/>
            <label for="'+QuestionID+'_1">Yes</label>

            <input type="radio" name="radio1" id="'+QuestionID+'_0" value="0" onclick="hide("comment_'+QuestionID+'")"/>
            <label for="'+QuestionID+'_0">No</label>
            </fieldset>

            //I am trying to make these visable if yes is selected
            <textarea cols="30" rows="8" name="textarea" style="width:80%; visibility:hidden;" id="comment_'+QuestionID+'"></textarea>
            <br />
            </div>

ありがとうございました！

4

3 に答える 3

1 
$('input[type="radio"][name="radio1"]').on('change', function() {
    $('textarea[name="textarea"]').toggle($.trim(this.value)=='1');
});

フィドル

于 2013-02-27T19:14:27.327 に答える
1

onSelectラジオボタンでは意味がありません...入力フィールドのテキストを「選択」するために使用されます。onClick代わりに使用してください。ただし、 を使用するonClickと、ラジオ ボタンが実際に選択されているかどうかを確認する必要があるため、JS の部分が複雑になります。

質問に「jQuery」のタグを付けたので、次のようにします。

HTML:

<div class="radioToggle" data-role="fieldcontain" data-theme="c" id="quests'+id+'">
    <fieldset data-role="controlgroup" data-type="horizontal">
        <label>Question?</label>

        <input type="radio" name="radio1" id="'+QuestionID+'_1" value="1" />
        <label for="'+QuestionID+'_1">Yes</label>

        <input type="radio" name="radio1" id="'+QuestionID+'_0" value="0" />
        <label for="'+QuestionID+'_0">No</label>
    </fieldset>

    //I am trying to make these visable if yes is selected
    <textarea cols="30" rows="8" name="textarea" style="width:80%; visibility:hidden;" id="comment_'+QuestionID+'"></textarea>
    <br />
</div>

JS:

$('.radioToggle').on('click', 'input:radio', function(){
    var parent = $(this).closest('.radioToggle'),
        textbox = parent.find('textbox');
    if ($(this).attr('id') == '1') {
        textbox.show();
    } else {
        textbox.hide();
    }
})
于 2013-02-27T19:00:22.063 に答える
1

生成されたコード (おそらく php) で何かを達成しようとしていると思います。これがあなたがする必要があることの要点です：

<div data-role="fieldcontain" data-theme="c" id="quests'+id+'">
    <fieldset data-role="controlgroup" data-type="horizontal">
        <label>Question?</label>
        <input type="radio" name="radio1" value="1" data-id="123" />
        <label>Yes</label>
        <input type="radio" name="radio1" value="0" data-id="123" />
        <label>No</label>
    </fieldset>
    <textarea cols="30" rows="8" name="textarea" style="width:80%; visibility:hidden;"></textarea>
    <br />
</div>
<div id="comment_123" style="display:none">here I am</div>

そしてスクリプト：

$("input[type='radio']").change(function () {
    if ($(this).val() == "1") {
        $('#comment_' + $(this).data("id")).show();
    } else {
        $('#comment_' + $(this).data("id")).hide();
    }
});

アイデアを説明するフィドルを次に示します: http://jsfiddle.net/DgAHf/

于 2013-02-27T19:05:21.020 に答える