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

时间:2014-04-01 15:49:16

标签: javascript jquery html onclick radio-button

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

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()
    };
});

Fiddle

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

9 个答案:

答案 0 :(得分:7)

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>

答案 1 :(得分:2)

您可以使用onclick()

,而不是内嵌.click() javascript
$(document).ready(function () {
    $(".text").hide();
    $('input[type="radio"]').eq(0).click(function() {
        $(".text").show()
    });
});

<强> Updated Fiddle

但是,您应该对.change()元素使用input事件:

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

<强> Updated Fiddle

答案 2 :(得分:2)

您可以使用此代码:

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

内联事件不是重新编目,因此将广播中的更改事件绑定,如果值为Show,请充分显示!

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

答案 3 :(得分:2)

目前,您可以将点击的对象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)">
                                                                      ^^^^ 

小提琴--> http://jsfiddle.net/tT48f/7/

答案 4 :(得分:2)

检查 demo jsFiddle

的jQuery

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

答案 5 :(得分:2)

重新定义您的HTML标记,然后您只能使用CSS:

DEMO jsFiddle

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

答案 6 :(得分:1)

尝试:

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

});

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

答案 7 :(得分:1)

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

答案 8 :(得分:0)

                        <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>