Question

我正在使用复选框在javascript中进行问卷调查。复选框的总数超过50，因此我将在5页上显示它们（5页，每页10个复选框）

我需要的是：没有刷新的漂亮页面幻灯片。

示例：用户将获得10个checbox的问题，选择后，他将被转移到另一个页面，并选择更多复选框。

Answer 1

<!doctype html>
<html>
    <head>
        <title>
            Test
        </title>
        <style type='text/css'>
            div.visible { display:block; }
            div.hidden { display:none; }
        </style>
        <script type='text/javascript'>
            function NextDiv (newDivID) {
                var divs = document.getElementsByTagName('div');
                for (var i in divs) {
                    divs[i].className = 'hidden';
                }
                document.getElementById(newDivID).className = 'visible';
            }
        </script>
    </head>
    <body >
        <form method='post' action='' onsubmit='alert ("Where to send this data?"); return false;'>
            <div id='div1' class='visible'>
                <h2> page 1</h2>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='button' onclick='NextDiv("div2");' value='next'>
            </div>
            <div id='div2' class='hidden'>
                <h2> page 2</h2>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='button' onclick='NextDiv("div3");' value='next'>
            </div>
            <div id='div3' class='hidden'>
                <h2> page 3</h2>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='button' onclick='NextDiv("div4");' value='next'>
            </div>
            <div id='div4' class='hidden'>
                <h2> page 4</h2>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='button' onclick='NextDiv("div5");' value='next'>
            </div>
            <div id='div5' class='hidden'>
                <h2> page 5</h2>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='checkbox'>
                <input type='submit'>
            </div>
        </form>
    </body>
</html>

带有复选框的javascript问题分为多个页面

1 个答案: