根据单选按钮选择更改 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

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

像这样的东西：

 <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 2

尝试这个：

<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>

编辑：

添加一些评论

Answer 3

首先，您的<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 4

     <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 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>