Jquery шоу скрыть FIELDSET в зависимости от радиокнопка

Question

Я хочу использовать JQuery, чтобы показать и скрыть некоторые Fieldset внутри формы таким образом:

ПСЕВДОКОД:

- if user-type == Company: show("company-fieldset") 

- if user-type == Individual: 
     - if individual-type == Freelancer: show("freelancer-fieldset") 
     - if individual-type == Professor: show("professor-fieldset") 
     - if individual-type == Student: show("student-fieldset") 

Я новичок в использовании JQuery, но я нужен быстрый способ достичь этой цели, я буду очень признателен, если вы сможете мне помочь. Пожалуйста, примите во внимание, что: Мне нужно использовать переключатели, потому что они взаимны эксклюзивные. Каждый раз, когда я выбираю радиокнопку, форма должна обновляться в реальном времени. Благодаря

HTML

<form method="POST"> 

    <fieldset class="main-fieldset"> 
    <input type="radio" id="user-type" value="company" checked>Company<br> 
    <input type="radio" id="user-type" value="individual">Individual<br> 
    </fieldset> 

    <fieldset class="company-fieldset"> 
    <p>Company showed!</p> 
    </fieldset> 

    <fieldset class="individual-fieldset"> 
    <p>Individual showed!</p> 
    <input type="radio" id="individual-type" value="freelancer" checked>Freelancer<br> 
    <input type="radio" id="individual-type" value="professor">Professor<br> 
    <input type="radio" id="individual-type" value="student" >Student<br> 
    </fieldset> 

    <fieldset class="freelancer-fieldset"> 
    <p>Freelancer showed!</p> 
    </fieldset> 

    <fieldset class="professor-fieldset"> 
    <p>Professor showed!</p> 
    </fieldset> 

    <fieldset class="student-fieldset"> 
    <p>Student showed!</p> 
    </fieldset> 

    <fieldset class="main-fieldset"> 
    <button type="button" onclick="alert('Hello World!')">SUBMIT</button> 
    </fieldset> 

</form> 

JS

$(document).ready(function() { 

    $('#user-type').change(function() { 

     var user_type = $(this).attr("value"); 

     if (user_type === "Company") { 
      $('.company-fieldset').show(); 
      $('.freelancer-fieldset').hide(); 
      $('.professor-fieldset').hide(); 
      $('.student-fieldset').hide(); 
     } 

     if (user_type === "Individual") { 
      $('.company-fieldset').hide(); 
      if (user_type === "Freelancer") { 
       $('.freelancer-fieldset').show(); 
       $('.professor-fieldset').hide(); 
       $('.student-fieldset').hide(); 
      } 
      if (user_type === "Professor") { 
       $('.freelancer-fieldset').hide(); 
       $('.professor-fieldset').show(); 
       $('.student-fieldset').hide(); 
      } 
      if (user_type === "Student") { 
       $('.freelancer-fieldset').dide(); 
       $('.professor-fieldset').hide(); 
       $('.student-fieldset').show(); 
      } 
     } 
    }) 
}); 

Answer 1

не требуется здесь нет JQuery, немного переформатировать вашего HTML и небольшой опрыскивание CSS.

• Я добавил имя вашей радиостанции, так что они сгруппированы по типу
• Я поставил fieldsets после радио, которая контролирует их.

fieldset:not(.main-fieldset) { 
 
    display: none; 
 
} 
 
input[type=radio]:checked + br + fieldset { 
 
    display: block; 
 
}

<form method="POST"> 
 

 
    <fieldset class="main-fieldset"> 
 
    <input type="radio" id="user-type" name='user-type' value="company" checked>Company 
 
    <br> 
 
    <fieldset class="company-fieldset"> 
 
     <p>Company showed!</p> 
 
    </fieldset> 
 
    <input type="radio" id="user-type" name='user-type' value="individual">Individual 
 
    <br> 
 
    <fieldset class="individual-fieldset"> 
 
     <p>Individual showed!</p> 
 
     <input type="radio" id="individual-type" name="individual-type" value="freelancer" checked>Freelancer 
 
     <br> 
 
     <fieldset class="freelancer-fieldset"> 
 
     <p>Freelancer showed!</p> 
 
     </fieldset> 
 
     <input type="radio" id="individual-type" name="individual-type" value="professor">Professor 
 
     <br> 
 
     <fieldset class="professor-fieldset"> 
 
     <p>Professor showed!</p> 
 
     </fieldset> 
 
     <input type="radio" id="individual-type" name="individual-type" value="student">Student 
 
     <br> 
 
     <fieldset class="student-fieldset"> 
 
     <p>Student showed!</p> 
 
     </fieldset> 
 
    </fieldset> 
 
    </fieldset> 
 
    <fieldset class="main-fieldset"> 
 
    <button type="button" onclick="alert('Hello World!')">SUBMIT</button> 
 
    </fieldset> 
 

 
</form>

EDIT: Если вы можете гнездо fieldsets в одном из родителей (выглядит, как вы можете)

fieldset:not(.main-fieldset) { 
 
    display: none; 
 
} 
 
input[value=company]:checked ~ fieldset[class^=company] { 
 
    display: block; 
 
} 
 
input[value=individual]:checked ~ fieldset[class^=individual] { 
 
    display: block; 
 
} 
 
input[value=freelancer]:checked ~ fieldset[class^=freelancer] { 
 
    display: block; 
 
} 
 
input[value=professor]:checked ~ fieldset[class^=professor] { 
 
    display: block; 
 
} 
 
input[value=student]:checked ~ fieldset[class^=student] { 
 
    display: block; 
 
}

<form method="POST"> 
 

 
    <fieldset class="main-fieldset"> 
 
    <input type="radio" name="user-type" value="company" checked>Company 
 
    <br> 
 
    <input type="radio" name="user-type" value="individual">Individual 
 
    <br> 
 
    <fieldset class="company-fieldset"> 
 
     <p>Company showed!</p> 
 
    </fieldset> 
 

 
    <fieldset class="individual-fieldset"> 
 
     <p>Individual showed!</p> 
 
     <input type="radio" name="individual-type" value="freelancer" checked>Freelancer 
 
     <br> 
 
     <input type="radio" name="individual-type" value="professor">Professor 
 
     <br> 
 
     <input type="radio" name="individual-type" value="student">Student 
 
     <br> 
 
     <fieldset class="freelancer-fieldset"> 
 
     <p>Freelancer showed!</p> 
 
     </fieldset> 
 

 
     <fieldset class="professor-fieldset"> 
 
     <p>Professor showed!</p> 
 
     </fieldset> 
 

 
     <fieldset class="student-fieldset"> 
 
     <p>Student showed!</p> 
 
     </fieldset> 
 
    </fieldset> 
 
    </fieldset> 
 
    <fieldset class="main-fieldset"> 
 
    <button type="button" onclick="alert('Hello World!')">SUBMIT</button> 
 
    </fieldset> 
 

 
</form>

EDIT: Если вы действительно должны хранить один и тот же HTML, тогда вам потребуется jQuery. ПРИМЕЧАНИЕ. Мне все же пришлось предоставить имена ваших радиокнопек, чтобы сделать их взаимоисключающими.

$(function(){ 
 
    $("input[type=radio]").change(function(){ 
 
    if($(this).is(":checked")){ 
 
     $("fieldset:not(.main-fieldset)").hide();//hide everything 
 
     $(this).parent().show();//show this ones container 
 
     $("fieldset[class^='" + $(this).val() + "']").show(); //show the matching fieldset 
 
     $("fieldset[class^='" + $(this).val() + "']>input:checked").change();//show children as required. 
 
    } 
 
    }); 
 
    $("input[value=company]").change(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method="POST"> 
 

 
    <fieldset class="main-fieldset"> 
 
    <input type="radio" name="user-type" value="company" checked>Company<br> 
 
    <input type="radio" name="user-type" value="individual">Individual<br> 
 
    </fieldset> 
 

 
    <fieldset class="company-fieldset"> 
 
    <p>Company showed!</p> 
 
    </fieldset> 
 

 
    <fieldset class="individual-fieldset"> 
 
    <p>Individual showed!</p> 
 
    <input type="radio" name="individual-type" value="freelancer" checked>Freelancer<br> 
 
    <input type="radio" name="individual-type" value="professor">Professor<br> 
 
    <input type="radio" name="individual-type" value="student" >Student<br> 
 
    </fieldset> 
 

 
    <fieldset class="freelancer-fieldset"> 
 
    <p>Freelancer showed!</p> 
 
    </fieldset> 
 

 
    <fieldset class="professor-fieldset"> 
 
    <p>Professor showed!</p> 
 
    </fieldset> 
 

 
    <fieldset class="student-fieldset"> 
 
    <p>Student showed!</p> 
 
    </fieldset> 
 

 
    <fieldset class="main-fieldset"> 
 
    <button type="button" onclick="alert('Hello World!')">SUBMIT</button> 
 
    </fieldset> 
 

 
</form>

Answer 2

На самом деле мой HTML выглядит следующим образом:

<form method="POST"> 

     <fieldset class="main-fieldset"> 
      {{ form.email.label }} {{ form.email() }} 
      {{ form.password.label }} {{ form.password() }} 
      {{ form.phone.label }} {{ form.phone() }} 
      {{ form.location.label }} {{ form.location() }} 
      {{ form.user_type.label }} {{ form.user_type(id='user-type') }} 
     </fieldset> 

     <fieldset class="company-fieldset"> 
      {{ form.company_name.label }} {{ form.company_name() }} 
     </fieldset> 

     <fieldset class="individual-fieldset"> 
      {{ form.name.label }} {{ form.name() }} 
      {{ form.surname.label }} {{ form.surname() }} 
      {{ form.birth.label }} {{ form.birth() }} 
      {{ form.skills.label }} {{ form.skills() }} 
      {{ form.individual_type.label }} {{ form.individual_type(id='individual-type') }} 

      <fieldset class="freelancer-fieldset"> 
       {{ form.studio.label }} {{ form.studio() }} 
      </fieldset> 

      <fieldset class="professor-fieldset"> 
       {{ form.department.label }} {{ form.department() }} 
      </fieldset> 

      <fieldset class="student-fieldset"> 
       {{ form.school.label }} {{ form.school() }} 
      </fieldset> 
     </fieldset> 

     <fieldset class="main-fieldset"> 
      {{ form.submit() }} 
     </fieldset> 
</form> 

и мой JS выглядит следующим образом:

$(document).ready(function() { 

    $("#user_type, #individual_type").change(function() { 

     var user_type = $('#user_type').attr("value"); 

     if (user_type == "company") { 
      $('.company-fieldset').show(); 
      $('.individual-fieldset').hide(); 
     } 

     if (user_type == "individual") { 

      $('.company-fieldset').hide(); 

      var individual_type = $('#individual_type').attr("value"); 

      if (individual_type == "freelancer") { 
       $('.freelancer-fieldset').show(); 
       $('.professor-fieldset').hide(); 
       $('.student-fieldset').hide(); 
      } 
      if (individual_type == "professor") { 
       $('.freelancer-fieldset').hide(); 
       $('.professor-fieldset').show(); 
       $('.student-fieldset').hide(); 
      } 
      if (individual_type == "student") { 
       $('.freelancer-fieldset').hide(); 
       $('.professor-fieldset').hide(); 
       $('.student-fieldset').show(); 
      } 
     } 
    }) 
});