Question

我已经尝试了很长时间才能在网页上显示一个按钮，并根据所选的单选按钮使该按钮的链接发生变化。但是，到目前为止，除了单选按钮外，我的网页上没有任何内容。到目前为止，这是我的代码：

＆＃13;

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

＆＃13;

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

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

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h2>Drawing a Pattern with Nested Loops</h2>
        <input type="submit" value="Refresh" onclick=""window.location.reload()"/>
        <?php

            $star = rand(1,20);
            $row = 1;
            $col =1;

               while($row <= $star) {
                   for($col = 1; $col < $row; $col++)
                   {
                       echo " * ";
                   }
                   echo "<br>";
                   $col--;
               }
   </body>
</html>

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>

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

5 个答案: