Question

我正在设计一份调查问卷，使用单选按钮和复选框询问一系列问题。我想用jQuery以小块方式显示问题，而不是一次性显示几个问题。

这是我到目前为止所做的：

<p>
    1a. Has this happened to you? <label><input id="radio1" type="radio" name="toggler" value="1" />Yes </label>
    <label><input id="radio2" type="radio" name="toggler" value="2" />No </label>
</p>

<div id="blk-2" class="toHide" style="display:none"> <!-- 1a. Choice: No -->
    <form name="form1" method="post" action="nextPage.html">
        <input type="submit" name="Submit" value="Continue"><br /><br />
    </form>
</div>

<div id="blk-1" class="toHide" style="display:none"> <!-- 1a. Choice: Yes -->
<p>
    1b. How often has this happened to you? 
</p>
<p><input type="radio" name="how_often" value="day" /> one of more times a day</p>
<p><input type="radio" name="how_often" value="week" /> one of more times a week</p>
<p><input type="radio" name="how_often" value="month" /> one of more times a month</p>
    <!-- Display "reveal more" button after one of the "how_often" buttons is selected -->
<input type="submit" name="Submit" value="reveal more"><br /><br />
</div><!-- /blk-1 -->




<div id="02a_part1_question" style="display:none">
<p>
    2a. Where has this happened to you? 
</p>
    <table>
        <tr>
            <td></td>
            <td><strong>Yes</strong></td>
            <td><strong>No</strong></td>
        </tr>
        <tr>
            <td>homeroom</td>
            <td><input type="radio" name="homeroom" value="Yes" /></td>
            <td><input type="radio" name="homeroom" value="No" /></td>
        </tr>
        <tr>
            <td>cafeteria</td>
            <td><input type="radio" name="cafeteria" value="Yes" /></td>
            <td><input type="radio" name="cafeteria" value="No" /></td>
        </tr>
        <tr>
            <td>academic class</td>
            <td><input type="radio" name="academic_class" value="Yes" /></td>
            <td><input type="radio" name="academic_class" value="No" /></td>
        </tr>
        <tr>
            <td>before school</td>
            <td><input type="radio" name="before_school" value="Yes" /></td>
            <td><input type="radio" name="before_school" value="No" /></td>
        </tr>
    </table>
    <input value="reveal more" type="submit"><br /><br />
</div><!-- /02a_part1_question -->

<div id="02a_part2_question" style="display:none">
    <table>
        <tr>
            <td></td>
            <td><strong>Yes</strong></td>
            <td><strong>No</strong></td>
        </tr>
        <tr>
            <td>bus</td>
            <td><input type="radio" name="bus" value="Yes" /></td>
            <td><input type="radio" name="bus" value="No" /></td>
        </tr>
        <tr>
            <td>after school</td>
            <td><input type="radio" name="after_school" value="Yes" /></td>
            <td><input type="radio" name="after_school" value="No" /></td>
        </tr>
        <tr>
            <td>gym</td>
            <td><input type="radio" name="gym" value="Yes" /></td>
            <td><input type="radio" name="gym" value="No" /></td>
        </tr>
        <tr>
            <td>dances</td>
            <td><input type="radio" name="dances" value="Yes" /></td>
            <td><input type="radio" name="dances" value="No" /></td>
        </tr>
    </table>
    <input value="reveal more" type="submit"><br /><br />
</div><!-- /02a_part2_question -->

<div id="02a_part3_question" style="display:none">
    <table>
        <tr>
            <td></td>
            <td><strong>Yes</strong></td>
            <td><strong>No</strong></td>
        </tr>
        <tr>
            <td>hallway</td>
            <td><input type="radio" name="hallway" value="Yes" /></td>
            <td><input type="radio" name="hallway" value="No" /></td>
        </tr>
        <tr>
            <td>sporting events</td>
            <td><input type="radio" name="sporting_events" value="Yes" /></td>
            <td><input type="radio" name="sporting_events" value="No" /></td>
        </tr>
        <tr>
            <td>bathroom</td>
            <td><input type="radio" name="bathroom" value="Yes" /></td>
            <td><input type="radio" name="bathroom" value="No" /></td>
        </tr>
        <tr>
            <td>telephone</td>
            <td><input type="radio" name="telephone" value="Yes" /></td>
            <td><input type="radio" name="telephone" value="No" /></td>
        </tr>
    </table>
    <input value="reveal more" type="submit"><br /><br />
</div><!-- /02a_part3_question -->

<div id="02a_part4_question" style="display:none">
    <table>
        <tr>
            <td></td>
            <td><strong>Yes</strong></td>
            <td><strong>No</strong></td>
        </tr>
        <tr>
            <td>online/texting during school</td>
            <td><input type="radio" name="texting_dur_school" value="Yes" /></td>
            <td><input type="radio" name="texting_dur_school" value="No" /></td>
        </tr>
        <tr>
            <td>online/texting outside of school</td>
            <td><input type="radio" name="texting_out_school" value="Yes" /></td>
            <td><input type="radio" name="texting_out_school" value="No" /></td>
        </tr>
    </table>
    <input value="reveal more" type="submit"><br /><br />
</div><!-- /02a_part4_question -->




<div id="02b_part1_question" style="display:none">
<p>
    2b. Identify the online/texting programs where this has occured. (This choice will appear if "online/texting during school" or "online/texting outside of school" was selected in 2a.) 
</p>
    <table>
        <tr>
            <td></td>
            <td><strong>Yes</strong></td>
            <td><strong>No</strong></td>
        </tr>
        <tr>
            <td>Facebook</td>
            <td><input type="radio" name="Facebook" value="Yes" /></td>
            <td><input type="radio" name="Facebook" value="No" /></td>
        </tr>
        <tr>
            <td>Twitter</td>
            <td><input type="radio" name="Twitter" value="Yes" /></td>
            <td><input type="radio" name="Twitter" value="No" /></td>
        </tr>
        <tr>
            <td>IMing</td>
            <td><input type="radio" name="IMing" value="Yes" /></td>
            <td><input type="radio" name="IMing" value="No" /></td>
        </tr>
        <tr>
            <td>Email</td>
            <td><input type="radio" name="Email" value="Yes" /></td>
            <td><input type="radio" name="Email" value="No" /></td>
        </tr>
        <tr>
            <td>Myspace</td>
            <td><input type="radio" name="Myspace" value="Yes" /></td>
            <td><input type="radio" name="Myspace" value="No" /></td>
        </tr>
        <tr>
            <td>Texting</td>
            <td><input type="radio" name="Texting" value="Yes" /></td>
            <td><input type="radio" name="Texting" value="No" /></td>
        </tr>
        <tr>
            <td>Online Gaming</td>
            <td><input type="radio" name="Online_Gaming" value="Yes" /></td>
            <td><input type="radio" name="Online_Gaming" value="No" /></td>
        </tr>
    </table>
    <input value="reveal more" type="submit"><br /><br />
</div><!-- /02b_part1_question -->





<div id="02c_question" style="display:none">
<p>
    2c. Click on the ONE place where this has happened the most. 
    <br />
    (This section appears with items that were marked YES from 2a.) 
</p>
    <table>
        <tr>
            <td><input type="radio" name="2c" value="(name)" /> item selected from 2a if necessary</td>
        </tr>
        <tr>
            <td><input type="radio" name="2c" value="(name)" /> item selected from 2a if necessary</td>
        </tr>
        <tr>
            <td><input type="radio" name="2c" value="(name)" /> item selected from 2a if necessary</td>
        </tr>
        <tr>
            <td><input type="radio" name="2c" value="(name)" /> item selected from 2a if necessary</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="checkbox27" value="checkbox"> etc.</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="checkbox27" value="checkbox"> etc.</td>
        </tr>
    </table>
    <input value="Continue" type="submit"><br /><br />
</div><!-- /02c_question -->

这是javascript：

$(document).ready(function() {

    $(function() {
        $("[name=toggler]").click(function() {
            $('.toHide').hide();
            $("#blk-" + $(this).val()).toggle();
        });
    });

    $(':submit').click(function() {
        $('#02a_part1_question').show();
        $('#02a_part2_question').show();
        $('#02a_part3_question').show();
        $('#02a_part4_question').show();
        $('#02b_question').show();
        $('#02c_question').show();
    });

});

第一部分（1a）有效，但我似乎无法正确显示其余部分。

任何帮助将不胜感激。虽然它无法正常工作，但我已将其发布在http://jsfiddle.net/mrfisherman2010/xM6Ft/1/

Answer 1

尝试为要显示的第一个class添加current，例如div。显示后，请移除class并将其添加到下一个div。示例代码：

 $('.current').show();
 $('.current').removeClass('current').next("div").addClass('current');

演示： http://jsfiddle.net/xM6Ft/2/

更新

要隐藏上一个div，您可以将第一行更改为：

$('.current').show().prev("div").hide();

演示： http://jsfiddle.net/xM6Ft/4/

Answer 2

在准备好的函数中，将单击处理程序绑定到[name = toggler]。在页面加载时，虽然只有2个输入具有该名称（1a的输入），因此当您单击1b中的一个单选按钮时，没有任何事情发生。我建议在页面上的所有输入中添加相同的类（例如class =“toggler”），然后将准备好的函数更改为

$(".toggler").click(function() {
  //...
});

JQuery在问卷中隐藏/显示div

2 个答案: