根据单选按钮选择更改 div 的内容

Question

长期以来，我一直在尝试让一个按钮出现在网页上，并使该按钮所指向的链接根据所选的单选按钮而改变。但是，到目前为止，我的网页上除了单选按钮之外什么都没有出现。 到目前为止，这是我的代码：

<div id="quick-book">
    <script>
        if (document.getElementById("radio-restaurant").checked){
            document.getElementById("button").innerHTML = "<a href='./restaurant.html'>Submit</a>";
        } else if (document.getElementById("radio-hotel").checked){
            document.getElementById("button").innerHTML = "<a href='./hotel.html'>Submit</a>"
        }
    </script>
    <form name="frmRadio" id="radio-buttons" action="">
        <input type="radio" id="radio-restaurant" name="option" onclick="document.getElementById('radio-buttons').action='';">Restaurant<br>
        <input type="radio" id="radio-hotel" name="option" onclick="document.getElementById('radio-buttons').action='';">Hotel<br>
    </form>
    <div name ="button">
    </div>
</div>

我希望这里有人可以帮助指导我正确的方向！

Answer 1

试试这个：

<div id="quick-book">
  <script>
    function $(e) {
      //Just something I have found useful
      return document.getElementById(e);
    }
    function rb_onchange(s) {
      //First clean up
      $("button").innerHTML = '';
      //The id is added because both radio buttons
      //will fire this event when one changes
      //So to prevent both both conditions firing you have to add this additional condition
      if (s.checked && s.id == "radio-restaurant") {
        //If the radio button is checked and the id of
        //said radio button is the restaurant one then add the innerHTML
        $("button").innerHTML = "<a href='./restaurant.html'>Submit</a>";
      }
      else if (s.checked && s.id == "radio-hotel") {
        //If the radio button is checked and the id of
        //said radio button is the hotel one then add the innerHTML
        $("button").innerHTML = "<a href='./hotel.html'>Submit</a>";
      }
    }
  </script>
  <form name="frmRadio" id="radio-buttons" action="">
    <input type="radio" id="radio-restaurant" name="option" onchange="rb_onchange(this);">Restaurant<br>
    <input type="radio" id="radio-hotel" name="option" onchange="rb_onchange(this);">Hotel<br>
  </form>
  <div name ="button"></div>
</div>

编辑： 似乎我没有注意到按钮 div 的 id 属性。，....

变化：

<div name ="button"></div>

到

<div name="button" id="button"></div>

编辑：

添加一些 cmets

Answer 2

首先，您的<script> 只执行一次，而不是在每次单选按钮更改时执行。而且由于最初没有检查任何内容，因此脚本什么也不做。此外，当这个脚本被执行时，下面的元素还没有被渲染。您需要：

1) 将脚本向下移动到所有 div 下方。

2) 创建一个change 回调来检查单选按钮的值

<div id="quick-book">
    <form name="frmRadio" id="radio-buttons" action="">
        <input type="radio" id="radio-restaurant" name="option" onclick="change(this)">Restaurant<br>
        <input type="radio" id="radio-hotel" name="option" onclick="change(this)">Hotel<br>
    </form>
    <div id ="button">
    </div>
</div>
<script>
    function change(radio) { 
        if (radio.checked && radio.id === "radio-restaurant") {
            document.getElementById("button").innerHTML = "<a href='./restaurant.html'>Submit</a>";
        } else {
            document.getElementById("button").innerHTML = "<a href='./hotel.html'>Submit</a>"
        }
    }
</script>

Answer 3

     <div id="quick-book">
        <script>
        function checkRadio(radio) {
           if (radio.id === "radio-restaurant"){
                document.getElementById("button-div").innerHTML = "<a href='./restaurant.html'>Submit</a>";
           } else {
                document.getElementById("button-div").innerHTML = "<a href='./hotel.html'>Submit</a>";
           }
          }
        </script>
        <form name="frmRadio" id="radio-buttons" action="">
            <input type="radio" id="radio-restaurant" name="option" onchange="checkRadio(this)">Restaurant<br>
            <input type="radio" id="radio-hotel" name="option" onchange="checkRadio(this)">Hotel<br>
        </form>
        <div id="button-div">
        </div>
    </div>

Answer 4

您应该在代码中添加一个函数，并在单击收音机时添加它。

类似这样的：

<script>
    function myFunction() {
        if (document.getElementById("radio-restaurant").checked){
            document.getElementById("button").innerHTML = "<a href='./restaurant.html'>Submit</a>";
        } else if (document.getElementById("radio-hotel").checked){
            document.getElementById("button").innerHTML = "<a href='./hotel.html'>Submit</a>"
        }
    }
    </script>
    
<div id="quick-book">
    <form onchange="myFunction()" name="frmRadio" id="radio-buttons" action="">
        <input type="radio" id="radio-restaurant" name="option" onclick="document.getElementById('radio-buttons').action='';">Restaurant<br>
        <input type="radio" id="radio-hotel" name="option" onclick="document.getElementById('radio-buttons').action='';">Hotel<br>
    </form>
    <div id="button">
    </div>
</div>

并将 name="button" 更改为 id="button"

Answer 5

$(document).ready(function () 
 { 
  $("#watch-me").click(function()
  {
    $("#show-me:hidden").show('slow');
   $("#show-me-two").hide();
   $("#show-me-three").hide();
   });
   $("#watch-me").click(function()
  {
    if($('watch-me').prop('checked')===false)
   {
    $('#show-me').hide();
   }
  });
  
  
  
  
  
  
  $("#see-me").click(function()
  {
    $("#show-me-two:hidden").show('slow');
   $("#show-me").hide();
   $("#show-me-three").hide();
   });
   $("#see-me").click(function()
  {
    if($('see-me-two').prop('checked')===false)
   {
    $('#show-me-two').hide();
   }
  });
  
  
  
  
  
  
  
  $("#look-me").click(function()
  {
    $("#show-me-three:hidden").show('slow');
   $("#show-me").hide();
   $("#show-me-two").hide();
   });
   $("#look-me").click(function()
  {
    if($('see-me-three').prop('checked')===false)
   {
    $('#show-me-three').hide();
   }
  });
  
 });

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="row">
 <div class="col-sm-12" align="center">

        <form id='form-id'>
            <input id='watch-me' name='test' type='radio' checked /> Radio 1
            <input id='see-me' name='test' type='radio' /> Radio 2
            <input id='look-me' name='test' type='radio' /> Radio 3
        </form>
        <br><br>
        <div id='show-me'>
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
                <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
                <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
                <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
            </ul>
            
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="home">Home Tab Content</div>
                <div role="tabpanel" class="tab-pane" id="profile">Profile Tab Content</div>
                <div role="tabpanel" class="tab-pane" id="messages">Messages tab Content</div>
                <div role="tabpanel" class="tab-pane" id="settings">Setting tab Content</div>
            </div>
        </div>
        
        <div id='show-me-two' style='display:none; border:2px solid #ccc'>Editing snippet "On Click Change on Radio Button" <br> Editing snippet "On Click Change on Radio Button"</div>
        <div id='show-me-three' style='display:none; border:2px solid #ccc'>Hello I'm Div 3</div>
          
 </div>
</div>