javascript - 具有单选按钮功能的复选框

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>

以上代码包含两个具有单选按钮功能的复选框。这很好用。但是如何在不使用 jquery 的情况下使用 javascript 执行此操作。如何实现这一目标。

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>