基于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事件的单选按钮被选择时，我需要显示它们。非常感谢您的帮助。

Fiddle

- user3361043

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>

- Rich

---

这很容易理解，而且运行得非常好。谢谢。 - user3361043

Answer 2

你可以使用.click()替换内联的onclick() JavaScript：

$(document).ready(function () {
    $(".text").hide();
    $('input[type="radio"]').eq(0).click(function() {
        $(".text").show()
    });
});

更新的代码片段

然而，对于元素，你应该使用.change()事件：

$(document).ready(function () {
    $(".text").hide();
    $('input[type="radio"]').eq(0).change(function() {
        $(".text").show()
    });
});

Updated Fiddle

- Felix

Answer 3

你可以使用以下代码：

$(document).ready(function() {
    $(".text").hide()
    $('[name=radio1]').on('change', function(){
        $('.text').toggle(this.value === 'Show');
    })
});

不推荐使用内联事件，所以将更改事件绑定到单选按钮上，如果值为Show，则显示它！

http://jsfiddle.net/tT48f/3/

- Karl-André Gagnon

Answer 4

目前您可以将点击的对象作为参数以 this 的形式传递给 getResults()，其中 this 指当前点击的对象。

请参见下面的示例：

脚本

$(document).ready(function() {
    $(".text").hide()

});
function getResults(elem) {
    elem.checked && elem.value == "Show" ? $(".text").show() : $(".text").hide();
};

HTML

<input type="radio" name="radio1" value="Show" onClick="getResults(this)">
Do nothing                                                         ^^^^
<input type="radio" name="radio1" value="Nothing" onclick="getResults(this)">
                                                                      ^^^^ 

Fiddle --> http://jsfiddle.net/tT48f/7/

- Dhaval Marthak

Answer 5

请查看此演示 jsFiddle

jQuery

$(document).ready(function() {
    $(".text").hide()
    $('[name=radio1]').on('change', function(){
        $('.text').toggle(this.value === 'Show');
    })
});

- pj013

Answer 6

重新定义一下你的HTML标记，然后你只需要使用CSS即可:

DEMO jsFiddle

input[value=Nothing]:checked ~ .text{
    display: none;
}

- A. Wolff

Answer 7

 1. $("input[name='Radio1']").change(function(){
           if($(this).val()=="Ya") {
                $("#QUESTION_1").fadeIn(250);
           }
           else {
               $("#QUESTION_1").fadeOut(250); 
           }        });

- Don Zanurano

---

你能否详细说明一下你的答案，添加关于你提供解决方案的更多描述？ - abarisone

Answer 8

尝试类似以下代码：

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

});

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

- Girish Vadhel

Answer 9

                        <div class="RdoClick">
                            <asp:RadioButton ID="RadioSugges" runat="server" GroupName="PopupRadio" Text="&nbsp;&nbsp;&nbsp;C. Insert your suggestion:" />
                        </div>
                        <asp:TextBox ID="TextBox1" runat="server" class="PopupTxtBox" PlaceHolder="Enter your suggestion..."
                            onClick="check();" TabIndex="1" />

<script type="text/javascript">
    function check() {
        document.getElementById('<%=RadioSugges.ClientID%>').checked = true;
    }

</script>

- Mairaj Rasool

---

欢迎来到StackOverflow。回答问题时请注意代码格式。同时尽量避免仅有代码的回答。 - rtruszk