如何从调查表中删除项目符号/数字

时间：2016-09-23 07:25:53

标签： javascript html css forms

我已经开发了一个测验表单，其中形式在问题之前，子弹和数字都来了。我想删除其中一个（子弹或数字）。

Please see this image 

* { margin:0; padding:0; }
.floatleft {float:left !important;}
.floatright {float:right !important;}
.floatnone {float:none !important;}
.alignleft {text-align:left !important;}
.alignright {text-align:right !important;}
.aligncenter {text-align:center !important;}
.no-display { display:none; }
.no-margin { margin:0 !important; }
.no-padding { padding:0 !important; }
a:focus, button:focus {outline:0px solid}
img {
    max-width:100%;
    height:auto;
    border:0; 
    vertical-align:top;
}
.fix {overflow:hidden}
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 10px;
	color:#000;
}
a {transition: all 0.3s ease 0s;text-decoration:none;}
a:hover {
    color: #fff;
    text-decoration: none;
}
a:active, a:hover, a:focus {
  outline: 0 none;
    text-decoration: none
}
.clear{clear:both}

#wrapper
{
	height:100%;
	width:100%;
}
body {
  color: #000;
  height:100%;
  width:100%;
  font-size: 16px;
  line-height: 20px;
  text-align: left;
  overflow-x:hidden;
}
#header {
	width:100%;
	height:100px;
}
#logo{
	clear:both;
	margin:20px;
}
#logo a {
    display: block;
    margin-left: -18px;
    position: relative;
}

#quiz input {
    vertical-align: middle;
}

#quiz ol {
   margin: 0 0 10px 20px;
}

#quiz ol li {
   margin: 0 0 20px 0;
}

#quiz ol li div {
   padding: 4px 0;
}

#quiz h3 {
   font-size: 17px; margin: 0 0 1px 0; color: #000;
       font-family: 'Roboto', sans-serif;
	   font-weight:600;
}

#quiz label
{
	font-family: 'Roboto', sans-serif;
	font-weight:normal;
}

#results {
    font: 44px Georgia, Serif;
}

center 
{
	font-size:xx-large;
	padding:20px 0 50px 0;
	font-family: 'Roboto', sans-serif;
}

.form-footer .button {
    margin-right: 10px;
    margin-bottom: 5px;
	color: #fff;
    text-shadow: 0 1px rgba(0, 0, 0, 0.08);
	    background-color: #ecae3d;
		border: 0;
    height: 42px;
    line-height: 1;
    font-size: 15px;
    cursor: pointer;
    padding: 0 35px;
    text-align: center;
    vertical-align: top;
    display: inline-block;
    -webkit-user-drag: none;
	font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-weight: 400;
}

.form-footer .button:hover{
	
	background-color:#DBDBDB;
	color:#000;
}

#quiz {
    left: 50%;
    margin-left: 25%;
    
}

#footer{
	width:100%;
	height:80px;
	background-color:#2D2D2D;
	color:#9C9C9C;
	position:absolute;
	clear:both;
	margin-top:2%;
}

#footer #footer-center
{
	font-size:18px;
	margin:auto;
	font-family: "Roboto", Arial, Helvetica, sans-serif;
	clear:both;
	padding:20px 0 0 0 ;
	
}

.survey-form
{   
	width:100%;
	min-height:500px
}
li{
	padding-bottom:20px;
	margin-left:0px;
	padding-left:0px;
}
ul
{
	padding:0px;
	margin:0px;
	
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	
	<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css"/>
	<link rel="stylesheet" type="text/css" href="CSS/style.css"/>
	<link rel="stylesheet" type="text/css" href="CSS/responsive.css"/>
</head>

<body class="no-transition stretched">
<div id="wrapper" class="clearfix">
  <header id="header" class="full-header">
    <!-- Logo-->
    <div id="logo">
      <a href="index.html" class="standard-logo"><img src="images/sequreone-logo.png" alt="Secqureone Logo"></a>
    </div>
    <!-- #logo end -->
  </header>
  <center></center>
  <div class="survey-form" id="form">
    <form action="contact.php" method="post" id="quiz">
      <ul>
        <li>
          <h3>2+2=0?</h3>

          <div>
            <input type="radio" name="question-1-answers" id="question-1-answers-A" value="A. Yes" required/>
            <label for="question-1-answers-A">A) Yes </label>
          </div>
          <div>
            <input type="radio" name="question-1-answers" id="question-1-answers-B" value="B. No" required/>
            <label for="question-1-answers-B">B) No</label>
          </div>
        </li>
        <li>
          <h3>2+9</h3>
          <div>
            <input type="radio" name="question-2-answers" id="question-2-answers-A" value="A. PCI" required/>
            <label for="question-2-answers-A">A) 11</label>
          </div>
          <div>
            <input type="radio" name="question-2-answers" id="question-2-answers-B" value="B. HIPAA" required/>
            <label for="question-2-answers-B">B) 12</label>
          </div>
          <div>
            <input type="radio" name="question-2-answers" id="question-2-answers-C" value="C. FISMA" required/>
            <label for="question-2-answers-C">C) 10</label>
          </div>
          <div>
            <input type="radio" name="question-2-answers" id="question-2-answers-D" value="D. GLBA" required/>
            <label for="question-2-answers-D">D) 9</label>
          </div>
          <div>
            <input type="radio" name="question-2-answers" id="question-2-answers-E" value="E. SOX" required />
            <label for="question-2-answers-E">E) 99</label>
          </div>
          <div>
            <input type="radio" name="question-2-answers" id="question-2-answers-F" value="F. ISO27001" required/>
            <label for="question-2-answers-F">F) 27001</label>
          </div>
          <div>
            <input type="radio" name="question-2-answers" id="question-2-answers-G" value="G. others" required/>
            <label for="question-2-answers-G">G) Others</label>
            <input type="text" />
          </div>
        </li>
        <li>
          <h3>8*5=40?</h3>
          <div>
            <input type="radio" name="question-3-answers" id="question-3-answers-A" value="A. Yes" required/>
            <label for="question-3-answers-A">A) Yes </label>
          </div>
          <div>
            <input type="radio" name="question-3-answers" id="question-3-answers-B" value="B. No" required/>
            <label for="question-3-answers-B">B) No </label>
          </div>
        </li>
        <li>
          <h3>7/8=1?</h3>
          <div>
            <input type="radio" name="question-4-answers" id="question-4-answers-A" value="A. Yes" required/>
            <label for="question-4-answers-A">A) Yes</label>
          </div>
          <div>
            <input type="radio" name="question-4-answers" id="question-4-answers-B" value="B. No" required/>
            <label for="question-4-answers-B">B) No</label>
          </div>
        </li>
        <li>
          <h3>14-2=12</h3>
          <div>
            <input type="radio" name="question-5-answers" id="question-5-answers-A" value="A. Yes" required/>
            <label for="question-5-answers-A">A) Yes </label>
          </div>
          <div>
            <input type="radio" name="question-5-answers" id="question-5-answers-B" value="B. No" required/>
            <label for="question-5-answers-B">B) No </label>
          </div>
        </li>
        <li>
          
      </ul>
      <div class="form-footer text-left">
        <button type="submit" id="submit"  class="button btn-primary">Submit</button>
		
      </div>
	  
    </form>
	<div class="form-footer text-left">
	<button id="next" data-btntext-sending="Next" class="NextButton">Next</button>
  </div>
  </div>
  <div id="footer">
		
		<center id="footer-center"> Copyright &copy; 2016 Secqureone,Inc. All rights reserved </center>
		</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var currentPage = 0;
var pages = 5;
var itemsPerPage = 3;
$("li h3").each(function(i, e){
   $(e).text((i + 1) + ") " + $(e).text());
});

$("#next").click(function() {
  $("li")
    //.css("background", "#FFF")
    .hide();
  for(i = 1; i <= itemsPerPage; i++) {
       $("li:nth-child(" + ((currentPage * itemsPerPage) + i) + ")")
       //.css("background" , "red")
       .show();
    $("#submit").hide();
    
  }
  
  if(currentPage < pages - 1) {
     currentPage += 1;  
  } else {
    currentPage = 0;
    $("#next").hide();
    $("#submit").show();
  }
  
});

$("#next").click();
</script>
</body>
</html>

请帮助解决此问题。

2 个答案:

答案 0 :(得分：1)

您将list-style: none;添加到ul代码

* { margin:0; padding:0; }
.floatleft {float:left !important;}
.floatright {float:right !important;}
.floatnone {float:none !important;}
.alignleft {text-align:left !important;}
.alignright {text-align:right !important;}
.aligncenter {text-align:center !important;}
.no-display { display:none; }
.no-margin { margin:0 !important; }
.no-padding { padding:0 !important; }
a:focus, button:focus {outline:0px solid}
img {
    max-width:100%;
    height:auto;
    border:0; 
    vertical-align:top;
}
.fix {overflow:hidden}
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 10px;
	color:#000;
}
a {transition: all 0.3s ease 0s;text-decoration:none;}
a:hover {
    color: #fff;
    text-decoration: none;
}
a:active, a:hover, a:focus {
  outline: 0 none;
    text-decoration: none
}
.clear{clear:both}

#wrapper
{
	height:100%;
	width:100%;
}
body {
  color: #000;
  height:100%;
  width:100%;
  font-size: 16px;
  line-height: 20px;
  text-align: left;
  overflow-x:hidden;
}
#header {
	width:100%;
	height:100px;
}
#logo{
	clear:both;
	margin:20px;
}
#logo a {
    display: block;
    margin-left: -18px;
    position: relative;
}

#quiz input {
    vertical-align: middle;
}

#quiz ol {
   margin: 0 0 10px 20px;
}

#quiz ul {
  list-style: none;
}

#quiz ol li {
   margin: 0 0 20px 0;
}
 
#quiz ol li div {
   padding: 4px 0;
}

#quiz h3 {
   font-size: 17px; margin: 0 0 1px 0; color: #000;
       font-family: 'Roboto', sans-serif;
	   font-weight:600;
}

#quiz label
{
	font-family: 'Roboto', sans-serif;
	font-weight:normal;
}

#results {
    font: 44px Georgia, Serif;
}

center 
{
	font-size:xx-large;
	padding:20px 0 50px 0;
	font-family: 'Roboto', sans-serif;
}

.form-footer .button {
    margin-right: 10px;
    margin-bottom: 5px;
	color: #fff;
    text-shadow: 0 1px rgba(0, 0, 0, 0.08);
	    background-color: #ecae3d;
		border: 0;
    height: 42px;
    line-height: 1;
    font-size: 15px;
    cursor: pointer;
    padding: 0 35px;
    text-align: center;
    vertical-align: top;
    display: inline-block;
    -webkit-user-drag: none;
	font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-weight: 400;
}

.form-footer .button:hover{
	
	background-color:#DBDBDB;
	color:#000;
}

#quiz {
    left: 50%;
    margin-left: 25%;
    
}

#footer{
	width:100%;
	height:80px;
	background-color:#2D2D2D;
	color:#9C9C9C;
	position:absolute;
	clear:both;
	margin-top:2%;
}

#footer #footer-center
{
	font-size:18px;
	margin:auto;
	font-family: "Roboto", Arial, Helvetica, sans-serif;
	clear:both;
	padding:20px 0 0 0 ;
	
}

.survey-form
{   
	width:100%;
	min-height:500px
}
li{
	padding-bottom:20px;
	margin-left:0px;
	padding-left:0px;
}
ul
{
	padding:0px;
	margin:0px;
	
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	
	<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css"/>
	<link rel="stylesheet" type="text/css" href="CSS/style.css"/>
	<link rel="stylesheet" type="text/css" href="CSS/responsive.css"/>
</head>

<body class="no-transition stretched">
<div id="wrapper" class="clearfix">
  <header id="header" class="full-header">
    <!-- Logo-->
    <div id="logo">
      <a href="index.html" class="standard-logo"><img src="images/sequreone-logo.png" alt="Secqureone Logo"></a>
    </div>
    <!-- #logo end -->
  </header>
  <center></center>
  <div class="survey-form" id="form">
    <form action="contact.php" method="post" id="quiz">
      <ul>
        <li>
          <h3>2+2=0?</h3>

          <div>
            <input type="radio" name="question-1-answers" id="question-1-answers-A" value="A. Yes" required/>
            <label for="question-1-answers-A">A) Yes </label>
          </div>
          <div>
            <input type="radio" name="question-1-answers" id="question-1-answers-B" value="B. No" required/>
            <label for="question-1-answers-B">B) No</label>
          </div>
        </li>
        <li>
          <h3>2+9</h3>
          <div>
            <input type="radio" name="question-2-answers" id="question-2-answers-A" value="A. PCI" required/>
            <label for="question-2-answers-A">A) 11</label>
          </div>
          <div>
            <input type="radio" name="question-2-answers" id="question-2-answers-B" value="B. HIPAA" required/>
            <label for="question-2-answers-B">B) 12</label>
          </div>
          <div>
            <input type="radio" name="question-2-answers" id="question-2-answers-C" value="C. FISMA" required/>
            <label for="question-2-answers-C">C) 10</label>
          </div>
          <div>
            <input type="radio" name="question-2-answers" id="question-2-answers-D" value="D. GLBA" required/>
            <label for="question-2-answers-D">D) 9</label>
          </div>
          <div>
            <input type="radio" name="question-2-answers" id="question-2-answers-E" value="E. SOX" required />
            <label for="question-2-answers-E">E) 99</label>
          </div>
          <div>
            <input type="radio" name="question-2-answers" id="question-2-answers-F" value="F. ISO27001" required/>
            <label for="question-2-answers-F">F) 27001</label>
          </div>
          <div>
            <input type="radio" name="question-2-answers" id="question-2-answers-G" value="G. others" required/>
            <label for="question-2-answers-G">G) Others</label>
            <input type="text" />
          </div>
        </li>
        <li>
          <h3>8*5=40?</h3>
          <div>
            <input type="radio" name="question-3-answers" id="question-3-answers-A" value="A. Yes" required/>
            <label for="question-3-answers-A">A) Yes </label>
          </div>
          <div>
            <input type="radio" name="question-3-answers" id="question-3-answers-B" value="B. No" required/>
            <label for="question-3-answers-B">B) No </label>
          </div>
        </li>
        <li>
          <h3>7/8=1?</h3>
          <div>
            <input type="radio" name="question-4-answers" id="question-4-answers-A" value="A. Yes" required/>
            <label for="question-4-answers-A">A) Yes</label>
          </div>
          <div>
            <input type="radio" name="question-4-answers" id="question-4-answers-B" value="B. No" required/>
            <label for="question-4-answers-B">B) No</label>
          </div>
        </li>
        <li>
          <h3>14-2=12</h3>
          <div>
            <input type="radio" name="question-5-answers" id="question-5-answers-A" value="A. Yes" required/>
            <label for="question-5-answers-A">A) Yes </label>
          </div>
          <div>
            <input type="radio" name="question-5-answers" id="question-5-answers-B" value="B. No" required/>
            <label for="question-5-answers-B">B) No </label>
          </div>
        </li>
        <li>
          
      </ul>
      <div class="form-footer text-left">
        <button type="submit" id="submit"  class="button btn-primary">Submit</button>
		
      </div>
	  
    </form>
	<div class="form-footer text-left">
	<button id="next" data-btntext-sending="Next" class="NextButton">Next</button>
  </div>
  </div>
  <div id="footer">
		
		<center id="footer-center"> Copyright &copy; 2016 Secqureone,Inc. All rights reserved </center>
		</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var currentPage = 0;
var pages = 5;
var itemsPerPage = 3;
$("li h3").each(function(i, e){
   $(e).text((i + 1) + ") " + $(e).text());
});

$("#next").click(function() {
  $("li")
    //.css("background", "#FFF")
    .hide();
  for(i = 1; i <= itemsPerPage; i++) {
       $("li:nth-child(" + ((currentPage * itemsPerPage) + i) + ")")
       //.css("background" , "red")
       .show();
    $("#submit").hide();
    
  }
  
  if(currentPage < pages - 1) {
     currentPage += 1;  
  } else {
    currentPage = 0;
    $("#next").hide();
    $("#submit").show();
  }
  
});

$("#next").click();
</script>
</body>
</html>

答案 1 :(得分：1)

删除jQuery代码

$("li h3").each(function(i, e){
   $(e).text((i + 1) + ") " + $(e).text());
});

或添加样式

#quiz ul li{
   list-style:none;
}

以下是更新后的代码： 

* {
  margin: 0;
  padding: 0;
}
#quiz ul li {
  list-style: none;
}
.floatleft {
  float: left !important;
}
.floatright {
  float: right !important;
}
.floatnone {
  float: none !important;
}
.alignleft {
  text-align: left !important;
}
.alignright {
  text-align: right !important;
}
.aligncenter {
  text-align: center !important;
}
.no-display {
  display: none;
}
.no-margin {
  margin: 0 !important;
}
.no-padding {
  padding: 0 !important;
}
a:focus,
button:focus {
  outline: 0px solid
}
img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: top;
}
.fix {
  overflow: hidden
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 10px;
  color: #000;
}
a {
  transition: all 0.3s ease 0s;
  text-decoration: none;
}
a:hover {
  color: #fff;
  text-decoration: none;
}
a:active,
a:hover,
a:focus {
  outline: 0 none;
  text-decoration: none
}
.clear {
  clear: both
}
#wrapper {
  height: 100%;
  width: 100%;
}
body {
  color: #000;
  height: 100%;
  width: 100%;
  font-size: 16px;
  line-height: 20px;
  text-align: left;
  overflow-x: hidden;
}
#header {
  width: 100%;
  height: 100px;
}
#logo {
  clear: both;
  margin: 20px;
}
#logo a {
  display: block;
  margin-left: -18px;
  position: relative;
}
#quiz input {
  vertical-align: middle;
}
#quiz ol {
  margin: 0 0 10px 20px;
}
#quiz ol li {
  margin: 0 0 20px 0;
}
#quiz ol li div {
  padding: 4px 0;
}
#quiz h3 {
  font-size: 17px;
  margin: 0 0 1px 0;
  color: #000;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
}
#quiz label {
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
}
#results {
  font: 44px Georgia, Serif;
}
center {
  font-size: xx-large;
  padding: 20px 0 50px 0;
  font-family: 'Roboto', sans-serif;
}
.form-footer .button {
  margin-right: 10px;
  margin-bottom: 5px;
  color: #fff;
  text-shadow: 0 1px rgba(0, 0, 0, 0.08);
  background-color: #ecae3d;
  border: 0;
  height: 42px;
  line-height: 1;
  font-size: 15px;
  cursor: pointer;
  padding: 0 35px;
  text-align: center;
  vertical-align: top;
  display: inline-block;
  -webkit-user-drag: none;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-weight: 400;
}
.form-footer .button:hover {
  background-color: #DBDBDB;
  color: #000;
}
#quiz {
  left: 50%;
  margin-left: 25%;
}
#footer {
  width: 100%;
  height: 80px;
  background-color: #2D2D2D;
  color: #9C9C9C;
  position: absolute;
  clear: both;
  margin-top: 2%;
}
#footer #footer-center {
  font-size: 18px;
  margin: auto;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  clear: both;
  padding: 20px 0 0 0;
}
.survey-form {
  width: 100%;
  min-height: 500px
}
li {
  padding-bottom: 20px;
  margin-left: 0px;
  padding-left: 0px;
}
ul {
  padding: 0px;
  margin: 0px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <link rel="stylesheet" type="text/css" href="CSS/bootstrap.css" />
  <link rel="stylesheet" type="text/css" href="CSS/style.css" />
  <link rel="stylesheet" type="text/css" href="CSS/responsive.css" />
</head>

<body class="no-transition stretched">
  <div id="wrapper" class="clearfix">
    <header id="header" class="full-header">
      <!-- Logo-->
      <div id="logo">
        <a href="index.html" class="standard-logo">
          <img src="images/sequreone-logo.png" alt="Secqureone Logo">
        </a>
      </div>
      <!-- #logo end -->
    </header>
    <center></center>
    <div class="survey-form" id="form">
      <form action="contact.php" method="post" id="quiz">
        <ul>
          <li>
            <h3>2+2=0?</h3>

            <div>
              <input type="radio" name="question-1-answers" id="question-1-answers-A" value="A. Yes" required/>
              <label for="question-1-answers-A">A) Yes</label>
            </div>
            <div>
              <input type="radio" name="question-1-answers" id="question-1-answers-B" value="B. No" required/>
              <label for="question-1-answers-B">B) No</label>
            </div>
          </li>
          <li>
            <h3>2+9</h3>
            <div>
              <input type="radio" name="question-2-answers" id="question-2-answers-A" value="A. PCI" required/>
              <label for="question-2-answers-A">A) 11</label>
            </div>
            <div>
              <input type="radio" name="question-2-answers" id="question-2-answers-B" value="B. HIPAA" required/>
              <label for="question-2-answers-B">B) 12</label>
            </div>
            <div>
              <input type="radio" name="question-2-answers" id="question-2-answers-C" value="C. FISMA" required/>
              <label for="question-2-answers-C">C) 10</label>
            </div>
            <div>
              <input type="radio" name="question-2-answers" id="question-2-answers-D" value="D. GLBA" required/>
              <label for="question-2-answers-D">D) 9</label>
            </div>
            <div>
              <input type="radio" name="question-2-answers" id="question-2-answers-E" value="E. SOX" required />
              <label for="question-2-answers-E">E) 99</label>
            </div>
            <div>
              <input type="radio" name="question-2-answers" id="question-2-answers-F" value="F. ISO27001" required/>
              <label for="question-2-answers-F">F) 27001</label>
            </div>
            <div>
              <input type="radio" name="question-2-answers" id="question-2-answers-G" value="G. others" required/>
              <label for="question-2-answers-G">G) Others</label>
              <input type="text" />
            </div>
          </li>
          <li>
            <h3>8*5=40?</h3>
            <div>
              <input type="radio" name="question-3-answers" id="question-3-answers-A" value="A. Yes" required/>
              <label for="question-3-answers-A">A) Yes</label>
            </div>
            <div>
              <input type="radio" name="question-3-answers" id="question-3-answers-B" value="B. No" required/>
              <label for="question-3-answers-B">B) No</label>
            </div>
          </li>
          <li>
            <h3>7/8=1?</h3>
            <div>
              <input type="radio" name="question-4-answers" id="question-4-answers-A" value="A. Yes" required/>
              <label for="question-4-answers-A">A) Yes</label>
            </div>
            <div>
              <input type="radio" name="question-4-answers" id="question-4-answers-B" value="B. No" required/>
              <label for="question-4-answers-B">B) No</label>
            </div>
          </li>
          <li>
            <h3>14-2=12</h3>
            <div>
              <input type="radio" name="question-5-answers" id="question-5-answers-A" value="A. Yes" required/>
              <label for="question-5-answers-A">A) Yes</label>
            </div>
            <div>
              <input type="radio" name="question-5-answers" id="question-5-answers-B" value="B. No" required/>
              <label for="question-5-answers-B">B) No</label>
            </div>
          </li>
          <li>

        </ul>
        <div class="form-footer text-left">
          <button type="submit" id="submit" class="button btn-primary">Submit</button>

        </div>

      </form>
      <div class="form-footer text-left">
        <button id="next" data-btntext-sending="Next" class="NextButton">Next</button>
      </div>
    </div>
    <div id="footer">

      <center id="footer-center">Copyright &copy; 2016 Secqureone,Inc. All rights reserved</center>
    </div>
  </div>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script>
    var currentPage = 0;
    var pages = 5;
    var itemsPerPage = 3;


    $("#next").click(function() {
      $("li")
        //.css("background", "#FFF")
        .hide();
      for (i = 1; i <= itemsPerPage; i++) {
        $("li:nth-child(" + ((currentPage * itemsPerPage) + i) + ")")
          //.css("background" , "red")
          .show();
        $("#submit").hide();

      }

      if (currentPage < pages - 1) {
        currentPage += 1;
      } else {
        currentPage = 0;
        $("#next").hide();
        $("#submit").show();
      }

    });

    $("#next").click();
  </script>
</body>

</html>

相关问题
最新问题