Question

<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>

上述编码包含两个带单选按钮功能的复选框。这很好用。但是如何使用javascript而不使用jquery来做到这一点。如何实现这一目标。

Answer 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>

Answer 2

我假设您只需要具有类名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来实现这一目标。

Answer 3

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

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

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

Answer 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>

带有单选按钮功能的复选框

4 个答案: