简体   繁体   English

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

[英]Change script for radio buttons to regular buttons

So I have this script that I've been using that works nicely for an my purposes but it is built with radio buttons, and I've been asked to do another project with it, but my boss would like the buttons to now be regular, non-radio buttons. 因此,我一直在使用此脚本,该脚本可以很好地实现我的目的,但是它是用单选按钮构建的,因此我被要求使用它进行另一个项目,但是我的老板希望按钮现在可以正常使用,非单选按钮。

Here is the code I've been using so far. 这是到目前为止我一直在使用的代码。 It's a lot harder to change over radio-button code to regular button code than I thought! 将单选按钮代码转换为常规按钮代码比我想象的要难得多! Any help would be very much appreciated, thanks! 任何帮助将不胜感激,谢谢!

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

change HTML part to: 将HTML部分更改为:

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

change Script part to: 将脚本部分更改为:

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

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM