使用基于单选按钮选择的jQuery隐藏/显示文本框

Question

我需要在我的表单上单击某个单选按钮时显示某些文本框,否则文本框应保持隐藏状态.这是我的一个例子:

HTML:

Radio buttons:
<p>Show textboxes<input type="radio" name="radio1" value="Show" onClick="getResults()">Do nothing<input type="radio" name="radio1" value="Nothing"></p>
Textboxes:
<div class="text"><p>Textbox #1 <input type="text" name="text1" id="text1" maxlength="30"></p></div>
<div class="text"><p>Textbox #2 <input type="text" name="text2" id="text2" maxlength="30"></p></div>

jQuery的:

$(document).ready(function() {
  $(".text").hide()
    function getResults() {
        $(".text").show()
    };
});

小提琴

当我取出.show()代码时,文本框保持隐藏状态.我需要在选中带有onClick事件的单选按钮时显示它们.任何帮助将非常感激.

Answer 1

的jsfiddle

使用Javascript

$(document).ready(function () {
    $(".text").hide();
    $("#r1").click(function () {
        $(".text").show();
    });
    $("#r2").click(function () {
        $(".text").hide();
    });
});

HTML

<p>Show textboxes
    <input type="radio" name="radio1" id="r1" value="Show">Do nothing
    <input type="radio" name="radio1" id="r2" value="Nothing">
</p>Wonderful textboxes:
<div class="text">
    <p>Textbox #1
        <input type="text" name="text1" id="text1" maxlength="30">
    </p>
</div>
<div class="text">
    <p>Textbox #2
        <input type="text" name="text2" id="text2" maxlength="30">
    </p>
</div>