0
votes

I need to have a functionality like on chosen sex fields in radio button each as Male and Female.

Depends on male radio button get checked, a bodytype in a another set of particular values in radio button should display.

As like male field, female field also have particular bodytype value in radio button should display.

How to have the depended radio button fields when sex field radio button get checked

3
Please provide a jsfiddle so that other users can help you - vdua
did u mean you want to show the different different radio buttons depending of selection of gender radio button?? like if we select "Male" it should display A and B and if we selct female then X and Y.. is it so? - Deepak Sharma

3 Answers

1
votes

Try this

HTML

<label>Male</label>
<input type="checkbox" id="male_c" class="gender">
<label>Female</label>
<input type="checkbox" name="female_c" class="gender">
<div id="boy">
    <label>Male Fiels</label>
    <input type="checkbox" name="itemselect" class="example" />
</div>
<div id="girl">
    <label>Girl Fields</label>
    <input type="checkbox" name="itemselect" class="example" />
</div>

Script

$('.gender').on('click', function () {
    if ($(this).is(':checked')) {
        if ($(this).prev().text() == 'Male') {
            $(this).siblings().prop('checked', false)
            $('#boy').show();
            $('#girl').hide();
        } else {
            $(this).siblings().prop('checked', false)
            $('#girl').show();
            $('#boy').hide();
        }
    } else {
        $('#boy,#girl').hide();
    }
});

DEMO

0
votes

Probably use should use show and hide function of jQuery

First you need to make all dependent radio button invisible, then if Male radio button is checked the display the contents of male bodytype

Maintain divs for each content for male and female

0
votes

Try This

HTML

Gender : <input type="radio" value="Male" name="gender" /> Male  <input type="radio" value="Female" name="gender" /> Female
<br/>
Body Type :
<div id="male">
 <input type="radio" value="MaleBT" name="genderBT"  />Male Body Type 

<input type="radio" value="MaleBT1" name="genderBT"  />Male Body Type 
</div>
<div id="female">
    <input type="radio" value="FemaleBT" name="genderBT" /> Female Body Type 
 <input type="radio" value="FemaleBT" name="genderBT" /> Female Body Type 
</div>

JS

$(function(){

$('input[name=gender]').click(function(e){
    if(this.value=="Male"){
        $('#female').hide();
          $('#male').show();
    }
    else {
         $('#male').hide();
         $('#female').show();
    }
});
  $('#female').hide();
  $('#male').hide();
});

DEMO HERE