javascript - 选择单选按钮时隐藏/显示 3 个文本框

Question

我有 2 个单选按钮。在选择一个时，我想显示 3 个文本框并在选择其他文本框时将其隐藏。

这是代码。

这是我的 2 个单选按钮。

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

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

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

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 帮助我解决这个问题。

Answer 1

您可以按如下方式执行此操作。首先将您的 HTML 更改为:

<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 并使用此代码:

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

您可以使用这个 JSFiddle 查看它是如何工作的:http://jsfiddle.net/pHsyj/