#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
Post a Comment