5个单选按钮随机填满?

时间:2013-08-05 16:51:11

标签: javascript html forms radio-button

嗨我正在尝试制作五个按钮,你可以看到我想要一个功能,当你按下“点击我”它会随机填满五个按钮。

这就像是游戏统计数据的随机生成器。

我不知道我是否做错了,但我想我需要一些其他编码。

任何可以帮助我的人都可以吗?

这就是我所拥有的:

<button onclick='myFunction()'>click me</button>

<div id="demo">
<Input type = radio Name = r1> 
<Input type = radio Name = r2> 
<Input type = radio Name = r3> 
<Input type = radio Name = r4>
<Input type = radio Name = r5> 
</div>


<script type="text/javascript">

    function myFunction() {
    document.getElementById('demo').innerHTML = '';
    var num = 3;
    var noOfButtons = Math.floor(Math.random() * num);
    console.log(noOfButtons);
    for (var i = 0; i < noOfButtons; i++) {

    var box = document.createElement();
        document.getElementById('demo');
        }
    }
</script>

2 个答案:

答案 0 :(得分:1)

不完全确定你在寻找什么。我把这个JSFiddle扔到了一起。看一看,看看它是否正在寻找。

<button id='button1'>click me</button>
<div id="demo">
    <input type='radio' id='r1'>
    <input type='radio' id='r2'>
    <input type='radio' id='r3'>
    <input type='radio' id='r4'>
    <input type='radio' id='r5'>
</div>

     var button1 = document.getElementById('button1');
     button1.onclick = function () {
         var noOfButtons = 5;
         var pick = Math.floor(Math.random() * noOfButtons) + 1;
         var radioBtn = document.getElementById('r' + pick);
         radioBtn.checked = true;
     }

[edit]

答案 1 :(得分:0)

我认为你要做的是随机检查有限数量的无线电,在这种情况下,不需要将demo的html设置为''。我将类myRadios添加到您的无线电标签中(以防万一您不想在随机检查中包含其他无线电),然后使用以下功能:

function myFunction() {
    var radios = document.getElementsByClassName('myRadios');
    for (var i=0; i<radios.length; i++)
    {
        radios[i].checked = ( (Math.random()*10) > 5) ? true : false;
    }
}

这是一个有效的fiddle。如果这是您正在寻找的功能,或者如果您对其工作方式有任何疑问,请告诉我们。)