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/

Answer 2

看到没有可用于您的html元素的唯一标识，我只是通过以通用方式思考来给出此代码。

尝试，

$('input[name="type"]:eq(1)').change(function(){
     $('input[type="text"]').toggle(this.checked);
});

Answer 3

这是最好的例子。尝试这样的事情。这是一个例子

$("input[type='radio']").change(function(){

if($(this).val()=="other")
{
    $("#otherAnswer").show();
}
else
{
       $("#otherAnswer").hide(); 
}

});

http://jsfiddle.net/Wc2GS/8/

我想这会解决你的问题

Answer 4

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

单击单选按钮

我想要显示这3个文本框。

<input type="text"  hidden="true" class="text"/> <br/>
 <input type="text" hidden="true" class="text"/> <br/>
<input type="text"  hidden="true" class="text"/> <br/>

和javascript： -

<script>
 function radio()
{
     var result = document.getElementsByClassName('text'").style.display="none";

}
</script>

Answer 5

试试这个

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

<br/>

<input class="box" type="text"  hidden="true"/> <br/>
<input class="box" type="text" hidden="true"/> <br/>
<input class="box" type="text"  hidden="true"/> <br/>

脚本

$("input[type='radio']").on('change',function(){
if($(this).val() == "exp")
   $('.box').show('slow');
else
    $('.box').hide();
});

DEMO

Answer 6

试试这个......

<input type="radio" name="type" id="fresh"> Fresher
<input type="radio" name="type" id="exp"> Experienced 
<input type="text" class="hid" hidden="true"/> <br/>
<input type="text" class="hid" hidden="true"/> <br/>
 <input type="text" class="hid"  hidden="true"/> <br/>

 $("#fresh").change(function(){
     $('.hid').css("style","display:none");  
 });

 $("#exp").change(function(){
     $('.hid').css("style","display:block");  
 });

Answer 7

<input type="radio" name="type" id='frsradio'> Fresher
<input type="radio" name="type" id='expradio'> Experienced <br>

<input type="text" class='txbx' hidden="true"/> <br/>
 <input type="text" class='txbx' hidden="true"/> <br/>
<input type="text" class='txbx' hidden="true"/> <br/>

   $(function() {
        $('#expradio').click(function() {
            $('.txbx').attr('hidden',false);
        });           
        $('#frsradio').click(function() {
            $('.txbx').attr('hidden',true);
        });
    });

WORKING jsfiddle

Answer 8

For default hide the text boxes In OnRender Complete Method you need hide the three textbox for that you put the below code.

                    $("#textbox 1").hide();
                    $("#textbox 2").hide();
                    $("#textbox 3").hide();

您需要在更改时在单选按钮中编写代码。

 Using the Id get the value of radio button

                    var val=$('#radioId').val;

                      if(val=='Fresher')
        {
                    $("#textbox 1").show();
                    $("#textbox 2").show();
                    $("#textbox 3").show();
                    }
                   else if (val=='Experienced'){

                    $("#textbox 1").hide();
                    $("#textbox 2").hide();
                    $("#textbox 3").hide();

                     }

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

8 个答案: