如果检查了无线电输入,则显示下一个问题

时间:2016-03-26 13:46:41

标签: javascript jquery

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

我想检查输入[收音机]是否已被检查

如果有任何<fieldset>(1)元素已经检查了子输入[radio]

然后让下一个<fieldset>(2)将其类设置为活动(显示:块)

<fieldset>(1)处于非活动状态(显示:无)

(检查无线电输入显示下一个问题) 我有10 <fieldset>

1 个答案:

答案 0 :(得分:0)

使用此脚本,您使用选择器

的方式有一些错误
$("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
    }
});