JQUERY show hide FIELDSET auf RADIO-Taste je

Ich will JQUERY verwenden zu zeigen und einige Fieldset in einer Form auf diese Weise verstecken:JQUERY show hide FIELDSET auf RADIO-Taste je

Pseudo-Code:

- 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")

Ich bin neu in mit JQuery, aber ich Ich brauche einen schnellen Weg, um dieses Ding zu erreichen, ich werde es wirklich schätzen, wenn du mir helfen kannst. Bitte beachten Sie, dass: Ich Radio-Buttons verwenden müssen, weil sie gegenseitig exklusiv sind. Immer wenn ich eine Radio-Taste wähle, muss das Formular in Echtzeit aktualisiert werden. Dank

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>

$(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(); 
      } 
     } 
    }) 
});

Quelle

2016-12-21 piezzoritro

Kein jQuery hier erforderlich, ein wenig Neuformatierung Ihrer HTML und eine kleine Prise CSS.

Ich habe einen Namen zu Ihren Radios, so dass sie nach Art
ich die Fieldset nach dem Radio, die sie steuert setzen gruppiert sind.

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: Wenn Sie nisten können die Feldgruppen im gleichen übergeordneten (sieht aus wie du kannst)

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: Wenn Sie wirklich den gleichen HTML halten müssen, dann wird jQuery benötigt. HINWEIS: Ich musste die Namen der Optionsfelder immer noch angeben, damit sie sich gegenseitig ausschließen.

$(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>

Quelle

2016-12-21 16:36:14 Steve

Ok ich Ihnen Steve wirklich danken, aber ich will noch jQuery zu benutzen, weil meine Radio-Buttons eigentlich nicht manuell von mir erstellt werden, sondern sie kommen aus der Flask WTFFORM-Bibliothek, so dass sie nicht gegenseitig überfallen werden können. Werfen Sie einen Blick auf: – piezzoritro

user_type = RadioField ('Benutzer Typ: *', validators = [Erforderlich()], Auswahl = [('Firma', 'Firma'), ('Individuum', 'Individual')], default = 'Firma') – piezzoritro

Ich bin nicht vertraut mit der Bibliothek in Frage, sagen Sie, Sie haben keine Kontrolle über die ausgegebene HTML? Sind die Radioknöpfe richtig gruppiert? – Steve

Eigentlich sieht mein HTML wie folgt aus:

<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>

und meine JS sieht wie folgt aus:

$(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(); 
      } 
     } 
    }) 
});

Quelle

2016-12-21 17:18:52 piezzoritro

JQUERY show hide FIELDSET auf RADIO-Taste je

Antwort

Verwandte Themen