2016-03-26 8 views
0

#Jquery, wenn der Radioeingang geprüft zeigen die nächsten Fragen

 $("input").on('change ', function() { 

     var ac_field = $("fieldset .active").children("input[type='radio']:checked"); 

     if(ac_field){ 
      var next = ac_field.next("fieldset"); 

      ac_field.addClass("unactive"); 
      ac_field.removeClass('active'); 

      next.addClass("active"); 
      next.removeClass('unactive'); 
     } 

    }) 

css

.active{ 
     display: block; 
    } 
    .unactive{ 
     display: none; 
    } 

html

 <!--Q_C1--> 
    <fieldset class="Q_C_1 active"> 
     <legend class="q_holder"></legend> 

     <div class="c_cont"> 

      <div class="C_A C_A_mI"> 
       <input type="radio" id="C_1_1" class="rad" name="Q_C_1" value="1"> 

       <label for="C_1_1" class="too_unhappy face_fix_all"></label> 
      </div> 

      <div class="C_A"> 
       <input type="radio" id="C_1_2" class="rad" name="Q_C_1" value="2"> 

       <label for="C_1_2" class="unhappy face_fix_all"></label> 
      </div> 

      <div class="C_A"> 
       <input type="radio" id="C_1_3" class="rad" name="Q_C_1" value="3"> 

       <label for="C_1_3" class="nut face_fix_all"></label> 
      </div> 

      <div class="C_A"> 
       <input type="radio" id="C_1_4" class="rad" name="Q_C_1" value="4"> 

       <label for="C_1_4" class="happy face_fix_all"></label> 
      </div> 

      <div class="C_A C_A_mII"> 
       <input type="radio" id="C_1_5" class="rad" name="Q_C_1" value="5"> 

       <label for="C_1_5" class="too_happy face_fix_all"></label> 
      </div> 

      <span class="stretch"></span> 

     </div> 

    </fieldset> 




    <!--Q_C2--> 
    <fieldset class="Q_C_2 unactive"> 
     <legend class="q_holder"></legend> 

     <div class="c_cont"> 

      <div class="C_A C_A_mI"> 
       <input type="radio" id="C_2_1" class="rad" name="Q_C_2" value="1"> 

       <label for="C_1" class="too_unhappy face_fix_all"></label> 
      </div> 

      <div class="C_A"> 
       <input type="radio" id="C_2_2" class="rad" name="Q_C_2" value="2"> 

       <label for="C_2_2" class="unhappy face_fix_all"></label> 
      </div> 

      <div class="C_A"> 
       <input type="radio" id="C_2_3" class="rad" name="Q_C_2" value="3"> 

       <label for="C_2_3" class="nut face_fix_all"></label> 
      </div> 

      <div class="C_A"> 
       <input type="radio" id="C_2_4" class="rad" name="Q_C_2" value="4"> 

       <label for="C_2_4" class="happy face_fix_all"></label> 
      </div> 

      <div class="C_A C_A_mII"> 
       <input type="radio" id="C_2_5" class="rad" name="Q_C_2" value="5"> 

       <label for="C_2_5" class="too_happy face_fix_all"></label> 
      </div> 

      <span class="stretch"></span> 

     </div> 

    </fieldset> 

ich es, wenn eine Eingabe [Radio] überprüfen wollen, überprüft

wenn es irgendwelchebekommen(1) Element, das Kind Eingang hat [Radio] geprüft

dann bekommen die nächste <fieldset> (2) eingestellt seine Klasse aktiv (display: block)

und <fieldset> (1) (Anzeige inaktiv: keine)

(ist die Radioeingang die nächsten Fragen zeigen aktiviert ist) i 10 <fieldset>

+1

'$ ('ac_field')' => $ ('. Ac_field') 'und' $ ('next') '=> $ ('. Next')' – Tushar

+0

ac_field => var und next => var –

+0

Dann brauchst du hier keine Anführungszeichen '$ ('ac_field')'. – Tushar

Antwort

0

verwenden Sie dieses Skript haben, gibt einige Fehler in der Art und Weise sind Sie die Selektoren verwenden

$("input").on('change ', function() { 
    var ac_field = $("input[type='radio']:checked").closest("fieldset.active");//changes here 

    if(ac_field){ 
     var next = ac_field.next("fieldset"); //changes here 

     ac_field.addClass("unactive"); 
     ac_field.removeClass('active'); 

     next.addClass("active"); //changes here 
     next.removeClass('unactive'); //changes here 
    } 
}); 
+0

immer noch nicht @Reddy –

+0

@MoazMabrok https://jsfiddle.net/RajReddy/oznzgnow/ ist das wie du willst ?? Ich werde es in der Antwort auf Ihrer Bestätigung hinzufügen –

+0

@MoazMabrok Oder ist es das Sie suchen https://jsfiddle.net/RajReddy/oznzgnow/1/ –

Verwandte Themen