javascript - 单击 "continue"按钮 Javascript 时单选按钮验证

Question

我创建了一个包含 4 个单选按钮和 1 个“继续”按钮的模板，其效果如下所示

我正在尝试在单击“继续”时添加 javascript 代码:

1. 如果选择了任何单选按钮，它会弹出一个警告，提示您需要选择一个按钮
2. 如果选择单选 1，将打开页面 choice1.php，如果选择单选 2，将打开页面 choice2.php，依此类推...

我正在学习一些教程并在基本示例上对其进行测试，它对我有用，但通常我会看到

<form onsubmit="return validateSubmit();" action="#"> 

和

<input type="submit" value="Submit">

当我将按钮更改为提交类型时，我失去了用 css 添加的效果。

这是我的代码片段

     @import url('https://fonts.googleapis.com/css?family=Lato');
    
    .container{
        font-family: 'Lato', sans-serif;
      display: block;
      position: relative;
      margin: 40px auto;
      height: auto;
      width: 500px;
      padding: 20px;
    }
    
    h1 {
    	color: #000000;
    }
    
    .container ul{
      list-style: none;
      margin: 0;
      padding: 0;
    	overflow: auto;
    }
    
    ul li{
      color: #696969;
      display: block;
      position: relative;
      float: left;
      width: 100%;
      height: 100px;
    	border-bottom: 1px solid #333;
    }
    
    ul li input[type=radio]{
      position: absolute;
      visibility: hidden;
    }
    
    ul li label{
      display: block;
      position: relative;
      font-weight: 300;
      font-size: 1.35em;
      padding: 25px 25px 25px 80px;
      margin: 10px auto;
      height: 30px;
      z-index: 9;
      cursor: pointer;
      -webkit-transition: all 0.25s linear;
    }
    
    ul li:hover label{
    	color: #1E90FF;
    }
    
    ul li .check{
      display: block;
      position: absolute;
      border: 5px solid #696969;
      border-radius: 100%;
      height: 25px;
      width: 25px;
      top: 30px;
      left: 20px;
    	z-index: 5;
    	transition: border .25s linear;
    	-webkit-transition: border .25s linear;
    }
    
    ul li:hover .check {
      border: 5px solid #1E90FF;
    }
    
    ul li .check::before {
      display: block;
      position: absolute;
    	content: '';
      border-radius: 100%;
      height: 15px;
      width: 15px;
      top: 5px;
    	left: 5px;
      margin: auto;
    	transition: background 0.25s linear;
    	-webkit-transition: background 0.25s linear;
    }
    
    input[type=radio]:checked ~ .check {
      border: 5px solid #1E90FF;
    }
    
    input[type=radio]:checked ~ .check::before{
      background: #1E90FF;
    }
    
    input[type=radio]:checked ~ label{
      color: #1E90FF;
    }
    
    @import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:700";
    
    
    .flex {
    	font-family: "Source Sans Pro", sans-serif;
      -webkit-font-smoothing: antialiased;
      min-height: 50vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    a.bttn {
      color: #1E90FF;
      text-decoration: none;
      -webkit-transition: 0.3s all ease;
      transition: 0.3s ease all;
    }
    a.bttn:hover {
      color: #FFF;
    }
    a.bttn:focus {
      color: #FFF;
    }
    .bttn {
      font-size: 18px;
      letter-spacing: 2px;
      text-transform: uppercase;
      display: inline-block;
      text-align: center;
      width: 270px;
      font-weight: bold;
      padding: 14px 0px;
      border: 3px solid #1E90FF;
      border-radius: 2px;
      position: relative;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
    
    }
    .bttn:before {
      -webkit-transition: 0.5s all ease;
      transition: 0.5s all ease;
      position: absolute;
      top: 0;
      left: 50%;
      right: 50%;
      bottom: 0;
      opacity: 0;
      content: '';
      background-color: #1E90FF;
      z-index: -2;
    }
    .bttn:hover:before {
      -webkit-transition: 0.5s all ease;
      transition: 0.5s all ease;
      left: 0;
      right: 0;
      opacity: 1;
    }
    .bttn:focus:before {
      transition: 0.5s all ease;
      left: 0;
      right: 0;
      opacity: 1;
    } 
    
    a.bttn{
       top: -110px; 
    }
    

     

    
    <div class="container">
    	
    	<h1 lign="center">Select the Type :</h1>
    	<br/>
      <ul>
      <li>
        <input type="radio" id="f-option" name="selector">
        <label for="f-option">Shipment</label>
        
        <div class="check"></div>
      </li>
      
      <li>
        <input type="radio" id="s-option" name="selector">
        <label for="s-option">Canceled</label>
        
        <div class="check"><div class="inside"></div></div>
      </li>
      
      <li>
        <input type="radio" id="t-option" name="selector">
        <label for="t-option">Ordered</label>
        
        <div class="check"><div class="inside"></div></div>
      </li>
      
        <li>
        <input type="radio" id="u-option" name="selector">
        <label for="u-option">Other</label>
        
        <div class="check"><div class="inside"></div></div>
      </li>
      
    </ul>
    </div>
    
      <div class="flex">
      <a class="bttn" >Continue</a>
    </div>
    
    
   

任何人都可以帮助我如何保持“继续”按钮的相同设计并向其添加 javascript 部分。

非常感谢。

Answer 1

如果您只想切换到不同的页面而不是提交表单，您可以简单地检查单选按钮的值，然后直接重定向到特定页面，如下所示:

当您取消注释 window.location.href 行时，您将被重定向到您在控制台输出中看到的文件。

$(function(){
	$('.bttn').on('click', function(){
    	if($('input[name="selector"]').groupVal() === undefined){
        	alert('Please select an option!');
        } else {
        	console.log('choice' + $('input[name="selector"]').groupVal() + '.php');
    		//window.location.href = 'order' + $('input[name="selector"]').groupVal() + '.php';
        }
    });
});

jQuery.fn.extend({
    groupVal: function() {
        return $(this).filter(':checked').val();
    }
});

@import url('https://fonts.googleapis.com/css?family=Lato');

.container{
    font-family: 'Lato', sans-serif;
  display: block;
  position: relative;
  margin: 40px auto;
  height: auto;
  width: 500px;
  padding: 20px;
}

h1 {
    color: #000000;
}

.container ul{
  list-style: none;
  margin: 0;
  padding: 0;
    overflow: auto;
}

ul li{
  color: #696969;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
    border-bottom: 1px solid #333;
}

ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

ul li label{
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 1.35em;
  padding: 25px 25px 25px 80px;
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}

ul li:hover label{
    color: #1E90FF;
}

ul li .check{
  display: block;
  position: absolute;
  border: 5px solid #696969;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 30px;
  left: 20px;
    z-index: 5;
    transition: border .25s linear;
    -webkit-transition: border .25s linear;
}

ul li:hover .check {
  border: 5px solid #1E90FF;
}

ul li .check::before {
  display: block;
  position: absolute;
    content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
    left: 5px;
  margin: auto;
    transition: background 0.25s linear;
    -webkit-transition: background 0.25s linear;
}

input[type=radio]:checked ~ .check {
  border: 5px solid #1E90FF;
}

input[type=radio]:checked ~ .check::before{
  background: #1E90FF;
}

input[type=radio]:checked ~ label{
  color: #1E90FF;
}

@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:700";


.flex {
    font-family: "Source Sans Pro", sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
a.bttn {
  color: #1E90FF;
  text-decoration: none;
  -webkit-transition: 0.3s all ease;
  transition: 0.3s ease all;
}
a.bttn:hover {
  color: #FFF;
}
a.bttn:focus {
  color: #FFF;
}
.bttn {
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  width: 270px;
  font-weight: bold;
  padding: 14px 0px;
  border: 3px solid #1E90FF;
  border-radius: 2px;
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);

}
.bttn:before {
  -webkit-transition: 0.5s all ease;
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: '';
  background-color: #1E90FF;
  z-index: -2;
}
.bttn:hover:before {
  -webkit-transition: 0.5s all ease;
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
}
.bttn:focus:before {
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
} 

a.bttn{
   top: -110px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

    <h1 lign="center">Select the Type :</h1>
    <br>
  <ul>
  <li>
    <input type="radio" id="f-option" value="1" name="selector">
    <label for="f-option">Shipment</label>

    <div class="check"></div>
  </li>

  <li>
    <input type="radio" id="s-option" value="2" name="selector">
    <label for="s-option">Canceled</label>

    <div class="check"><div class="inside"></div></div>
  </li>

  <li>
    <input type="radio" id="t-option" value="3" name="selector">
    <label for="t-option">Ordered</label>

    <div class="check"><div class="inside"></div></div>
  </li>

    <li>
    <input type="radio" id="u-option" value="4" name="selector">
    <label for="u-option">Other</label>

    <div class="check"><div class="inside"></div></div>
  </li>

</ul>
</div>

  <div class="flex">
  <a class="bttn" >Continue</a>
</div>