Question

我已经弄清楚了如何创建一组复选框，但是现在我面临的挑战是创建一个设置，用户只能选择其中一个复选框。

我在网上寻找可以找到一些替代代码的尝试，却一无所获。

            function printChecked(){
                var items=document.getElementsByName('acs');
                var selectedItems="";
                for(var i=0; i<items.length; i++) {
                    if(items[i].type=='checkbox' && items[i].checked)
                        selectedItems+=items[i].value+"\n";

                }

                alert(selectedItems);
            }
        <h1>Select which delimiter you want to use.</h1>
        <big>Select either TSV or CSV: </big><br>
        <input type="checkbox" name="acs" value="CSV">CSV<br> 
        <input type="checkbox" name="acs" value="TSV">TSV<br>
        <p>
            <input type="button" onclick='printChecked()' value="Print Selected Items" /input>
        </p>

您可以选择一个，或者两者都不选。我想选择成为其中一个。

Answer 1

在这种情况下，您应该使用收音机。您为什么尝试改用复选框？

Answer 2

考虑一下您是否曾经在使用过的任何网站或应用程序中看到此实现？没有？您还记得使用了什么吗？

为任务使用正确的工具：当您希望用户从选项列表中选择单个唯一值时，单选按钮或下拉列表可能是最适合考虑的UI元素。

复选框适用于对单个值是/否或同时指定多个选项。

大多数用户都熟悉这种使用模式，如果遇到一个复选框列表，将其限制为单个值，则可能会感到困惑或沮丧-他们会（根据普遍经验）假设他们应该能够选择多个选项。

Answer 3

在这里，收音机盒将是更好的设计。

但是，如果您坚持-您可以通过向复选框添加侦听器来将复选框入侵到单选框

function cbChange(obj) {
    var cbs = document.getElementsByClassName("cb");
    for (var i = 0; i < cbs.length; i++) {
        cbs[i].checked = false;
    }
    obj.checked = true;
}

演示：http://jsfiddle.net/5uUjj/

如何仅在JS中选中一个复选框？

3 个答案: