为选定的单选按钮div添加类别名称

Question

<div>
    One : <input type="radio" name="typeof" id="typeof1-grey" value="grey" />
    Two : <input type="radio" name="typeof" id="typeof2-pink" value="pink" />
    Three : <input type="radio" name="typeof" id="typeof3-green" value="green" />   
<div>
<div id="one" style="display:none;">
    ABC : <input type="text" name="abc" value="" />
    PQR : <input type="text" name="pqr" value="" />
</div>
<div id="two" style="display:none;">
    XYZ : <input type="text" name="xyz" value="" />
</div>
<div id="three" style="display:none;">
    Full Name: <input type="text" name="fname" value="" />
</div>

If select "One"(Grey) radio button, i need to show DIV id "one" and add class name(required) to all input fields with in the div. The same way if i change to pink radio button remove the previous div class name and add into the DIV id two using Jquery.

Please help me!

Answer 1

You can relate the radio controls to the div by their index . You can then add/remove the classes as needed. Try this:

$('input[type="radio"]').change(function() {
    $('input[type="text"]').removeClass('required');
    $('div').not(':first').hide();
    $('div').eq($(this).index() + 1).show().find('input').addClass('required');
});

Note that you can simplify this logic by the use of classes in your HTML:

<div>
    One : <input type="radio" name="typeof" id="typeof1-grey" class="radio" value="grey" />
    Two : <input type="radio" name="typeof" id="typeof2-pink" class="radio" value="pink" />
    Three : <input type="radio" name="typeof" id="typeof3-green" class="radio" value="green" />   
<div>
<div id="one" class="optional-div">
    ABC : <input type="text" name="abc" value="" class="text-input" />
    PQR : <input type="text" name="pqr" value="" class="text-input" />
</div>
<div id="two" class="optional-div">
    XYZ : <input type="text" name="xyz" value="" class="text-input" />
</div>
<div id="three" class="optional-div">
    Full Name: <input type="text" name="fname" value="" class="text-input" />
</div>

$('.radio').change(function() {
    $('.text-input').removeClass('required');
    $('.optional-div').hide().eq($(this).index()).show().find('.text-input').addClass('required');
});

Example fiddle

Answer 2

Here's my solution, I added a class sub to every div element which has to show/hide when a radiobutton is clicked.

 var divs = ['#one', '#two', '#three']; $('input[type="radio"]').change(function() { var current = $(divs[$(this).index()]); $('.sub').hide(); $('input').removeClass('required'); current.show(); current.children('input').addClass('required'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> One : <input type="radio" name="typeof" id="typeof1-grey" value="grey" /> Two : <input type="radio" name="typeof" id="typeof2-pink" value="pink" /> Three : <input type="radio" name="typeof" id="typeof3-green" value="green" /> <div> <div id="one" class="sub" style="display:none;"> ABC : <input type="text" name="abc" value="" /> PQR : <input type="text" name="pqr" value="" /> </div> <div id="two" class="sub" style="display:none;"> XYZ : <input type="text" name="xyz" value="" /> </div> <div id="three" class="sub" style="display:none;"> Full Name: <input type="text" name="fname" value="" /> </div> 

The only thing that you have to do is add the classname to the divs array when you make a fourth option. Goodluck.

Answer 3

Is that what you are looking for ??

html

<div>
    One : <input type="radio" name="typeof" data-target="#one" class="radiobtn" value="grey" />
    Two : <input type="radio" name="typeof" data-target="#two" class="radiobtn" value="pink" />
    Three : <input type="radio" name="typeof" data-target="#three" class="radiobtn" value="green" />   
<div>
<div class="toTarget" id="one" >
    ABC : <input type="text" name="abc" value="" />
    PQR : <input type="text" name="pqr" value="" />
</div>
<div class="toTarget" id="two" >
    XYZ : <input type="text" name="xyz" value="" />
</div>
<div class="toTarget" id="three" >
    Full Name: <input type="text" name="fname" value="" />
</div>

CSS

.toTarget{
  display:none;
}

javascript

$('.radiobtn').click(function(){
var color = $(this).val();
var Thistarget = $(this).attr('data-target');
$('.toTarget').css('display','none');
$(Thistarget+' input').attr('required');
$(Thistarget).css({
'display':'block'
});
});

Working Fiddle