选择单选按钮时隐藏/显示3个文本框 [英] Hide/display of 3 textboxes on selection of radio button

问题描述

我有2个单选按钮.选择一个时，我要显示3个文本框，而选择另一个时将其隐藏.

I have 2 radio buttons. On selection of one I want to display 3 text boxes and hide it on selection of other.

这是代码.

这是我的2个单选按钮.

These are my 2 radio buttons.

<input type="radio" name="type"> Fresher

<input type="radio" name="type"> Experienced 

在单击单选按钮时，我想显示这3个文本框.

On click of radio button experienced I want to display these 3 text box.

Company Name: <input type="text"  hidden="true"/> <br/>
Designation: <input type="text" hidden="true"/> <br/>
Year_of_Experience: <input type="text"  hidden="true"/> <br/>

请使用新的JavaScript来帮助我.

Please help me out with javascript for this as new to it.

推荐答案

您可以按照以下步骤进行操作.首先将您的HTML更改为此:

You could do this as follows. First change your HTML to this:

<input type="radio" name="type" value="Fresher"> Fresher
<input type="radio" name="type" value="Experienced"> Experienced

<div id="textboxes" style="display: none">
    Company Name: <input type="text" hidden="true"/> 
    Designation: <input type="text" hidden="true"/> 
    Year_of_Experience: <input type="text" hidden="true"/> 
</div>

此代码为您的代码添加了一个单选按钮值.这使我们可以根据选择了哪个单选按钮进行选择.其次，将输入字段分组为<div>，以便轻松隐藏三个输入字段.修改HTML格式后，在您的网站上包含jQuery并使用以下代码:

What this code adds to your code is to have a value for the radio buttons. This allows us to make a selection based on which radio button was selected. Secondly, the input fields are grouped together in a <div> to allow for easy hiding of the three input fields. After you have modifief your HTML as such, include jQuery on your website and use this code:

$(function() {
    $('input[name="type"]').on('click', function() {
        if ($(this).val() == 'Experienced') {
            $('#textboxes').show();
        }
        else {
            $('#textboxes').hide();
        }
    });
});

您可以使用此JSFiddle查看它的工作原理: http://jsfiddle.net/pHsyj/

You can see how this works using this JSFiddle: http://jsfiddle.net/pHsyj/

这篇关于选择单选按钮时隐藏/显示3个文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！