如何根据所选选项转到一个或另一个页面答案

【问题标题】：How to go to one or another page according to the chosen option如何根据所选选项转到一个或另一个页面
【发布时间】：2021-09-30 22:00:50
【问题描述】：

我正在开发一个表单，我想知道如何根据单选按钮中选择的选项转到一个或另一个页面，到目前为止，我有以下带有两个单选按钮的表单：

.sh_k .sh_sl {
    background-color: #edf7f8;
    color: #282828;
    font-size: 14px;
    margin-bottom: 20px;
    padding: 20px;
}

.sh_k .sh_sn {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.sh_k .sh_st {
    padding: 0 20px;
    width: 60%;
}

.sh_k .sh_sz {
    width: 100%;
}

.sh_u9 {
    width: 100%!important;
}

.sh_cq {
    font-size: 16px!important;
    margin-bottom: 10px;
}

.bpv_cq {
    display: inline-block;
    font-family: Lettera Text Std;
    margin: 0;
    padding: 0;
}

h5.bpv_cq {
    font-size: 14px;
    font-weight: 700;
}

.sh_vm {
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.bpv_cq.bpv_bpx {
    color: #282828;
}

.sh_qj:last-child {
    margin-right: 0;
}

.sh_qj {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.sh_vb {
    width: 50%!important;
}

.sh_un {
    margin-top: 20px!important;
    width: 31%;
}

.b3n_ag9 .b3n_lq {
    border: 2px solid #0c3970;
    border-radius: 50%;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    height: 20px;
    margin: 0 10px 0 0;
    position: relative;
    transition: border-color .2s ease;
    vertical-align: middle;
    width: 20px;
}

.b3n_ag9 label {
    cursor: pointer;
}

.b3n_ag9 span {
    color: #3b3f3b;
    letter-spacing: 1px;
    vertical-align: middle;
}

.b3n_ag9 input {
    appearance: none;
}

.b3n_ag9 .b3n_lq.b3n_lk:before {
    opacity: 1;
    transform: scale(1);
}
.b3n_ag9 .b3n_lq:before {
    background-color: #63666A;
    border-radius: 50%;
    color: #63666A;
    content: "";
    display: block;
    height: 12px;
    opacity: 0;
    position: absolute;
    right: 2px;
    top: 2px;
    transform: scale(0);
    transition: opacity .2s ease,transform .2s ease;
    width: 12px;
}

.b3n_ag9 .b3n_lq.b3n_lk, .b3n_ag9 .b3n_lq:hover {
    border-color: #63666A;
}

.b3n_ag9 input:checked:after {
    content: ' ';
    width: 12px;
    height: 12px;
    border-radius: 50px;
    position: absolute;
    background: blue;
  top: 2px;
    left: 2px;
    font-size: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<section class="content">
 <div class="box">
<div class="box-body">
<form class="sh_k" id="form">
              <div class="sh_sn">
                  <div class="sh_u9">
                      <h5 class="sh_cq bpv_cq bpv_bpx">
                        <span class="bpv_bpz">
                            Select a option
                        </span>
                      </h5>
                  </div>
                  <div class="sh_qj sh_vm sh_vb">
                      <div class="sh_un b3n_ag9">
                        <label for="dnaelaboracion">
                            <div id="elaboracion-radio" class="b3n_lq">                                    
                               <input name="dna" id="dnaelaboracion" type="radio" value="elaboracion"> 
                            </div>
                            <span>Elaboration</span>                                      
                        </label>
                      </div>
                      <div class="sh_un b3n_ag9">
                        <label for="dnarevision">
                            <div id="revision-radio" class="b3n_lq">
                                <input name="dna" id="dnarevision" type="radio" value="revision"> 
                            </div>
                            <span>Revision</span>
                      </label>
                      </div>
                  </div>
              </div> 
              <div class="sh_p0 sh_wl">
                  <button id="submit" type="submit" class="lu_g5 lu_l2">Next</button>
              </div>         
          </form>
              </div>  
                 </div>  

 </section>
  </div>  
  
  </body>
  
  </html>

我想要达到的目标如下：

如果我选择 Elaboration，它将转到 elaboration.html，如果我选择 Revision，它将在按下下一步按钮后转到 revision.html。

我希望有人可以指导我填写此表格。

【问题讨论】：

标签： javascript html css radio-button

【解决方案1】：

我这样做的方法是将 URI 存储在单选按钮 value 属性中，然后使用事件侦听器检索它。

<!-- HTML -->
<form id="form">
    <div>
        <label for="dnaelaboracion">
            <div id="elaboracion-radio">
                <input name="dna" id="dnaelaboracion" type="radio" value="page1.html">
            </div>
            <span>Elaboration</span>
        </label>
    </div>
    <div>
        <label for="dnarevision">
            <div id="revision-radio">
                <input name="dna" id="dnarevision" type="radio" value="page2.html">
            </div>
            <span>Revision</span>
        </label>
    </div>
    <button id="submit" type="submit">Next</button>
</form>

<!-- JS -->
<script>
    const button = document.getElementById("submit");
    button.addEventListener("click", function(event) {
    event.preventDefault();
    window.location.href = document.querySelector('input[name="dna"]:checked').value;
});
</script>

如果您不喜欢为此目的使用value 属性，您也可以将其存储在data attribute. 中

【讨论】：

看来你的回答有效，如果我想重定向到我项目中的特定路线，我可以在value中添加它吗？
是的。它将 value 属性中的任何内容视为 URI。您可以使用相对或绝对路径，但它会强制重新加载页面。