javascript - if the radio input is checked show the next Questions -


#jquery

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

i want check if input [ radio ] checked

if there <fieldset> (1) element have child input [ radio ] checked

then next <fieldset> (2) set class active ( display : block )

and <fieldset> (1) inactive ( display :none )

(is radio input checked show next questions) have 10 <fieldset>

use script, there few errors in way using selectors

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

Comments