具有单选按钮功能的复选框答案

【问题标题】：Check box with radiobutton functionality具有单选按钮功能的复选框
【发布时间】：2012-11-24 05:05:41
【问题描述】：

<style>
    .chb
    {
        width: 30px;
    }
</style>

<script type="text/javascript" src="jquery-1.5.2.js"></script>
<script>
    $(".chb").each(function() {
        $(this).change(function() {
            $(".chb").attr('checked',false);
            $(this).attr('checked',true);
        });
    });
</script>

<form action="demo_form.asp">
    <input type="checkbox" name="vehicle" value="Bike" class ="chb"> I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car" checked="checked" class="chb"> I have a car <br>
</form>

上面的代码包含两个带有单选按钮功能的复选框。这工作正常。但是如何在不使用 jquery 的情况下使用 javascript 来做到这一点。如何实现这一点。

【问题讨论】：

为什么不直接使用单选按钮？
从语义上讲，您应该使用单选按钮。
客户端想要使用复选框，不包含 jquery 的单选按钮功能
它回到了 document.getElementById 但我没有写出来——我可能会起火。
可能重复stackoverflow.com/questions/13505747/…

标签： javascript jquery html

【解决方案1】：

如果您只关心功能并且有很多复选框，这是一个简单的解决方案。

<script>
    function func(checkBox) {
        var inputs = document.getElementsByTagName("input");
        for(var j = 0; j < inputs.length; j++) {
          if(inputs[j].type == "checkbox" && (inputs[j].className == "chb")){
             inputs[j].checked = false;
          }     
        }
        checkBox.checked = true;
    }
</script>

现在将onclick 事件添加到您的所有复选框中，如下所示。

<input type="checkbox" name="vehicle" value="Bike" class ="chb" onclick="func(this);"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked="checked" class="chb" onclick="func(this);"> I have a car <br>

【讨论】：

我喜欢非 jquery 方法（没有双关语）

【解决方案2】：

也许，你也可以吃蛋糕。如果这只是关于外观并且您愿意考虑 CSS 解决方案，您可以在代码中添加单选按钮，并使其看起来像复选框。

input[type="radio"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
}

不需要 javascript 或 jQuery。但是，我还没有测试过它对跨浏览器的友好程度。绝对适用于 Chrome 和 Firefox。绝对不能在 IE 上运行

【讨论】：

【解决方案3】：

我假设您只需要对类名称为 chb 的输入使用此功能。否则需要更多的循环。

与此处提到的其他解决方案不同，我的代码不需要将onclick 添加到每个复选框：

<!DOCTYPE html>
<html lang="en-CA">
<head>
    <meta charset="utf-8">
    <title> My page </title>
    <script>
    function doCrazyCheckRadioThing(v) {
        var checkboxes, i;

        for(i=0, checkboxes = document.getElementsByClassName('chb'); i<checkboxes.length; i+=1) {
            checkboxes[i].checked = (checkboxes[i].value === v);
        }
    }

    function init() {
        var checkboxes, i;

        for(i=0, checkboxes = document.getElementsByClassName('chb'); i<checkboxes.length; i+=1) {
            checkboxes[i].addEventListener('change', function() {
                doCrazyCheckRadioThing(this.value);
            }, false);
        }
    }

    document.addEventListener('DOMContentLoaded', init, false); 
    </script>
<body>
    <form action="demo_form.asp">
        <input type="checkbox" name="vehicle" id='bike' value="Bike" class="chb"> I have a bike<br>
        <input type="checkbox" name="vehicle" id='car' value="Car" checked="checked" class="chb"> I have a car <br>
    </form>

我必须再次强调这是一种非常非语义的方式编写 HTML 来执行此操作。

【讨论】：

但是你说的很对。这是一种非常非语义的方式。我接受这一点

【解决方案4】：

详细信息：可能不是最优雅的代码，但它可以解决问题，并为您提供有关如何根据您的目的自定义它的想法

<input type="checkbox" name="chkFirst" onclick="CheckboxCheck('first')" />
<input type="checkbox" name="chkSecond" onclick="CheckboxCheck('second')" />

<script>
    function CheckboxCheck(checkbox)
    {
        var firstCheckbox = document.getElementById('chkFirst');
        var secondCheckbox = document.getElementById('chkSecond');

        if (checkbox == "first")
        {
            if (secondCheckbox.checked && firstCheckbox.checked == true)
            {
                secondCheckbox.checked = false;
            }
        }
        else
        {
            if (firstCheckbox.checked && secondCheckbox.checked == true)
            {
                firstCheckbox.checked = false;
            }
        }
    }
</script>

【讨论】：

【解决方案5】：

@prageeth 代码运行良好，除了优化之外，其他所有操作都是只检索第一行代码中的复选框，这样您就不必检查循环内的两件事，我想这会节省一些性能时间。

我什至找到了一种更好的方法，甚至不必在循环内使用任何条件。此答案已编辑..

<script>
    function func(checkBox) {
        var inputs = document.querySelectorAll("[type=checkbox], [class=chb]");
        for(var j = 0; j < inputs.length; j++) {
             inputs[j].checked = false;
        }
        checkBox.checked = true;
    }
</script>

【讨论】：