Question

这个问题还没有被问到，我试图为它找到一些解决方案，但是由于代码的用法不同，我发现的唯一问题没有帮助。我有一个在javaScript中陈述的on的有效解决方案，但是我不想为这个小问题准备大量的代码。每个人都只是在说如何使用几个复选框作为单选按钮，但是没有人说过如何使用多行复选框。

我遇到了一个我不知道简单解决方案的问题。这是我想创建的一种清单，其中有3个不同的选项（正确（检查），半正确（圆形），不正确（x）），并且可以一次用于更多不同的条目。我希望能够将它们用作单选按钮，因此该行仅使用其中一个。由于某种原因，我无法将类型设置为“ radio”或动画的css无法正常工作。这是CSS checkboxes as radio

的外观图片

我已经写了一些有效的js代码，但是如果有大量的条目，这是没有用的，因为我通过id接受每个输入，这里是JS的代码：

function chbx(obj)
{
var that = obj;
   if(document.getElementById(that.id).checked == true) {
      document.getElementById('checkbox1').checked = false;
      document.getElementById('checkbox2').checked = false;
      document.getElementById('checkbox3').checked = false;
      document.getElementById(that.id).checked = true;
   }
}

这是html代码：

<ul>
    <li>
      <p>ENTRY 1</p>
        <input class="testcheck" type="radio" name="checkbox1" id="checkbox1"  onclick="chbx(this)" />
        <label class="greencheck" for="checkbox1"></label>
        <input class="testkrog" type="radio" name="checkbox2" id="checkbox2"  onclick="chbx(this)" />
        <label class="yellowcircle" for="checkbox2"></label>
        <input class="testx" type="radio" name="checkbox3" id="checkbox3"  onclick="chbx(this)" />
        <label class="redx" for="checkbox3"></label>  
    </li>
    <li>
      <p>ENTRY 2</p>
        <input class="testcheck" type="radio" name="checkbox4" id="checkbox4" />
        <label class="greencheck" for="checkbox4"></label>
        <input class="testkrog" type="radio" name="checkbox5" id="checkbox5" />
        <label class="yellowcircle" for="checkbox5"></label>
        <input class="testx" type="radio" name="checkbox6" id="checkbox6"" />
        <label class="redx" for="checkbox6"></label>  
    </li>
    <li>
      <P>ENTRY 3</P>
        <input class="testcheck" type="radio" name="checkbox7" id="checkbox7"" />
        <label class="greencheck" for="checkbox7"></label>
        <input class="testkrog" type="radio" name="checkbox8" id="checkbox8"" />
        <label class="yellowcircle" for="checkbox8"></label>
        <input class="testx" type="radio" name="checkbox9" id="checkbox9"" />
        <label class="redx" for="checkbox9"></label>   
    </li>
</ul>

在我的函数中可能有一个简单的解决方案，但我不知道。我真的很感谢任何帮助。干杯：）

如何将多个复选框用作单选按钮

0 个答案: