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

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

if（document.getElementById（“radio restaurant”）.选中）{
document.getElementById（“按钮”）.innerHTML=“”；
}else if（文件getElementById（“无线酒店”）。已选中）{
document.getElementById（“按钮”）.innerHTML=“”
}
餐厅

酒店

试试这个：

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

功能$（e）{
//只是我发现有用的东西
返回文档.getElementById（e）；
}
功能rb_onchange（s）{
//第一次清理
$（“按钮”）.innerHTML=''；
//添加id是因为两个单选按钮
//更改时将触发此事件
//因此，为了防止这两种情况发生，您必须添加此附加条件
如果（s.checked&&s.id==“无线电餐厅”）{
//如果选中单选按钮，则
//所说的单选按钮是餐厅按钮，然后添加innerHTML
$（“按钮”）.innerHTML=“”；
}
否则如果（s.checked&&s.id==“无线电酒店”）{
//如果选中单选按钮，则
//所说的单选按钮是酒店按钮，然后添加innerHTML
$（“按钮”）.innerHTML=“”；
}
}
餐厅

酒店

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

更改：

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

到

编辑：

添加一些注释首先，您的

只执行一次，而不是每次更改单选按钮。由于最初没有检查任何内容，所以脚本不会执行任何操作。此外，当执行此脚本时，下面的元素尚未呈现。您需要：

1） 将脚本下移到所有div下面

2） 创建

change

回调以检查单选按钮值

餐厅

酒店

功能更改（收音机）{
如果（radio.checked&&radio.id==“无线电餐厅”）{
document.getElementById（“按钮”）.innerHTML=“”；
}否则{
document.getElementById（“按钮”）.innerHTML=“”
}
}

功能检查收音机（收音机）{
如果（radio.id==“无线电餐厅”）{
document.getElementById（“按钮div”）.innerHTML=“”；
}否则{
document.getElementById（“按钮div”）.innerHTML=“”；
}
}
餐厅

酒店

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

大概是这样的：

函数myFunction（）{
if（document.getElementById（“radio restaurant”）.选中）{
document.getElementById（“按钮”）.innerHTML=“”；
}else if（文件getElementById（“无线酒店”）。已选中）{
document.getElementById（“按钮”）.innerHTML=“”
}
}
餐厅

酒店

$（文档）.ready（函数（）
{ 
$（“#监视我”）。单击（函数（）
{
$（“show me:hidden”）.show（'slow'）；
$（“#给我看两个”）.hide（）；
$（“#给我看三个”）.hide（）；
});
$（“#监视我”）。单击（函数（）
{
if（$（'watch-me'）.prop（'checked'）==false）
{
$（'show me'）.hide（）；
}
});
$（“#见我”）。单击（函数（）
{
$（“#显示两个：隐藏”）.show（'slow'）；
$（“#给我看”）.hide（）；
$（“#给我看三个”）.hide（）；
});
$（“#见我”）。单击（函数（）
{
if（$（'see-me-two'）.prop（'checked'）==false）
{
$（“#显示两个”）.hide（）；
}
});
$（“#看我”）。单击（函数（）
{
$（“#显示三：隐藏”）.show（'slow'）；
$（“#给我看”）.hide（）；
$（“#给我看两个”）.hide（）；
});
$（“#看我”）。单击（函数（）
{
if（$（'see-me-three'）.prop（'checked'）==false）
{
$（“#显示三个”）.hide（）；
}
});
});

第一台
第二台
第三台









主页选项卡内容
配置文件选项卡内容
消息选项卡内容
设置选项卡内容
编辑代码段“单击单选按钮更改”
编辑代码段“单击单选按钮更改”
你好，我是三组
只要确保您有正确的CSS来支持它，而onclick应该可以工作，首选的事件是onchange，因为如果你点击元素的边缘，即使单选按钮的选中状态没有改变，它也会触发事件；不是你要添加的那个。所以myFunction不会启动是的，你是对的，在这种情况下最好直接在表单中添加“onclick”或更好的“onchange”，不要声明两次。感谢您的反馈onchange事件将在一个单选按钮被更改后为两个单选按钮触发，因为它位于同一标签中。。。。因此，您需要添加一个条件来检查单选按钮是否也被选中。@JuanTheron请查看我在JSFIDLE中的代码，并查看浏览器中的Javascript控制台，当onchange事件发生时，函数checkRadio只被调用一次
<div name="button" id="button"></div>

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