将单选按钮的脚本更改为常规按钮答案

【问题标题】：Change script for radio buttons to regular buttons将单选按钮的脚本更改为常规按钮
【发布时间】：2014-04-09 19:43:48
【问题描述】：

所以我有一个我一直在使用的脚本，它非常适合我的目的，但它是用单选按钮构建的，我被要求用它做另一个项目，但我的老板希望按钮现在是常规的非单选按钮。

这是迄今为止我一直在使用的代码。将单选按钮代码更改为常规按钮代码比我想象的要困难得多！任何帮助将不胜感激，谢谢！

<!DOCTYPE html>
<html>
<head>
<style>
#TFholder{
   background-image:url('truefalse.png');
   height:84px;
   width:576px;
}

button{
    height:84px; 
    width:280px; 
    color:white; 
    background-color:black;      
    margin-top:50px; 
    text-align:center; 
    line-height:10px;
    border:none;
    outline:none;}

button a{
    display:block;
    color:white;
    text-decoration:none;
    padding:20px 40px;}
</style>  

</head>
<body>

<script type="text/javascript">
function onCheck() {
if (document.getElementById('check1').checked) {
    document.getElementById('truebox').style.display = 'block';

    }
else document.getElementById('falsebox').style.display = 'block';

    }
</script>
<input type="radio" onclick="javascript:onCheck();" name="check" id="check1"><br> 
<input type="radio" onclick="javascript:onCheck();" name="check" id="check2"><br>
<div id="TFholder">
  <div id="truebox" style="display:none">
    <button type="button">CONTINUE!!!</a></div>
  </div>

  <div id="falsebox" style="display:none">
     <button type="button">SECOND BUTTON!!!</a></div>
  </div>
</div>

</body>
</html>

【问题讨论】：

我不确定你想做什么？单选按钮有不同的用途。
基本上是真/假。如果您单击一个图像，则会弹出一个图像，上面写着“正确”或“不正确”。消息取决于您单击的按钮。

标签： javascript jquery html button radio-button

【解决方案1】：

将 HTML 部分更改为：

<input id="Button1" type="button" value="button" onclick="javascript:b1();"/><br />
<br />
<input id="Button2" type="button" value="button" onclick="javascript:b2();"/><br>

将脚本部分更改为：

<script type="text/javascript">
    function b1() {
        document.getElementById('truebox').style.display = 'block';
    }

    function b2() {
        document.getElementById('falsebox').style.display = 'block';
    }
</script>

【讨论】：

这样就可以得到单选按钮的效果，点击新按钮jsbin example时，最后选中的按钮会被隐藏。您还可以添加更多按钮并放置您想要的目标（truebox 或 falsebox）。