2 
<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 来做到这一点。如何实现这一点。

4

5 回答 5

4

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

<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>
于 2012-11-24T05:34:50.237 回答
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 编码方式来执行此操作。

于 2012-11-24T05:38:36.460 回答
3

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

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

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

于 2012-11-24T05:43:37.750 回答
2

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

<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>
于 2012-11-24T05:29:35.820 回答
0

好吧，@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>
于 2019-03-12T21:15:44.197 回答