javascript - 重置/取消选中/选择问卷/调查中的用户选择

Question

我最近正在进行一项调查，我是个新手，只是根据我的调查逻辑使用 jQuery 来显示和隐藏。现在我面临一个问题，我需要一种方法将 block (内容)重置回其原始状态(未选中、未选择......等)。我当前正在做的是手动进入子元素并取消选中/取消选择/清空所有用户答案。 但我不太喜欢我的方法，因为我必须提前对所有 div-id 进行硬编码。我正在寻找(或编写一个函数)一个 jQuery 函数来实现动态重置，而不是硬编码方式。

有人可以给我指明方向吗？您可以在 Fiddle 上尝试我的代码(和 JS) .

jQuery:

$("#q2Back_btn").click(function(){ 
        //put Q2 logic here..

            $('#select_2a').prop('selectedIndex',0); 
            $('#div_2b').find("input[type='checkbox'],input[type='radio']").prop('checked',false);
            $("#secdiv").hide(500);
            $("#firstdiv").show(500);
});

HTML:

<div id="firstdiv"> 
    <div name = "div_1a">
              1a. Q1a ( choose 1 and go to Q2)
                <select id="select_1a" name="select_1a" >
                    <option checked ></option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </div>
            <br>
<div name= "div_1b">
                <p>1b. Q1b?</p>
                    <input type="radio" name="1bradiogroup" value="1"> 1 <br>
                    <input type="radio" name="1bradiogroup" value="2"> 2 <br>
                    <input type="radio" name="1bradiogroup" value="3"> 3 <br>

            </div>
                    <input type='button' id = "q1Next_btn" value='Save and Continue' />
        </div>  

        <div id="secdiv" style="display:none">      
                <h1>2. Q2a</h1>             
                <br>
            <div id="div_2a" name = "div_2a">
            2a. just hit back btn to go back to Q1
                <select id="select_2a" name="select_2a">
                    <option ></option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>    
                </select>
            </div>
            <div id="div_2b" name= "div_2b">
                <p>2b. Q2b?</p>
                    <input type="radio" name="2bradiogroup" value="1"> No <br>
                    <input type="radio" name="2bradiogroup" value="2"> Yes <br>

            </div>
                    <input type='button' id="q2Back_btn" value='Back'  />
                    <input type='button' id="q2Next_btn" value='Save and Continue'/>
        </div>

Answer 1

可以使用jQuery的函数trigger !以你的形式:$('#form').trigger('重置');

另请检查:Resetting a multi-stage form with jQuery !