我如何使用按钮制作一个单选按钮链接到一个页面

问题描述 投票:0回答:1

我如何做一个单选按钮,可以链接到一个页面,每个单选按钮有被链接到一个网站,当我按下一个按钮,我希望它引导我到选定的单选按钮的链接,我不希望它是点击,我希望它引导我,当我按下按钮。我已经尝试过这样做,但我需要帮助,这是我尝试的。

    <h3>
Which part of the building do you want cleaning
</h3>
<form name="frmSite" style="float: left; margin-top: 5px;"> 
  <a class="loginPg_choices" href="www.youtube.com">
    <input type="radio" name="site" value="1" id="radio_btn_1" style="float: left; clear: both;" />
    <span style="float: left; margin: -2px 0 0 5px;">The whole building</span>
    <br/> 
  </a>
  <a class="loginPg_choices" href="www.google.com">
    <input type="radio" name="site" value="1" id="radio_btn_1" style="float: left; clear: both;" />
    <span style="float: left; margin: -2px 0 0 5px;">Kithcen</span>
    <br/> 
  </a>
  <a href="#" type="submit" value="Submit" title="Login" style="float: right; clear: both;">
    Submit
  </a>
</form>

这是我试过的 https:/jsfiddle.netnb7jmfxp

html button radio-button wixcode corvid
1个回答
1
投票

在这里,你可以看到,在这里,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到,你可以看到。 是字段集的文档。

Html代码。

<form>
  <fieldset>
    <legend>Choose your Website</legend>

    <input type="radio" id="youtube" name="monster">
    <label for="youtube">Youtube</label><br />

    <input type="radio" id="google" name="monster">
    <label for="google">Google</label><br />

  </fieldset>
</form>
<button id="go_to_website">
  Go to website
</button>

Js代码:Jsfiddle链接:

  $("#go_to_website").click(function(event) {
    var link_id = $("input[name='monster']:checked").attr("id");
    if (link_id) {
      switch (link_id) {
        case "youtube":
          // code block
          window.location.href = 'www.youtube.com';
          break;
        case "google":
          // code block
          window.location.href = 'www.google.com';
          break;
        default:
          // code block
      }
    } else {
      alert("please pick an option")
    }
  })

Jsfiddle链接: https:/jsfiddle.netpc62oL744

希望对大家有所帮助。

© www.soinside.com 2019 - 2024. All rights reserved.