input:checkbox多选框实现单选效果跟radio一样

讲解“input:checkbox多选框实现单选效果跟radio一样”的完整攻略如下：

1. 设置checkbox的name属性

为了实现多选框的单选效果，我们需要给多选框设置相同的name属性。这样多选框就能够相互关联起来，保证只能选择其中一个。

2. 使用JavaScript实现单选效果

我们可以使用JavaScript来判断当前选择的多选框是否是选中状态。如果选中了一个多选框，就将其他的多选框设置为非选中状态。示例代码如下：

<label><input type="checkbox" name="fruit" value="apple" onclick="check(this)">苹果</label>
<label><input type="checkbox" name="fruit" value="banana" onclick="check(this)">香蕉</label>
<label><input type="checkbox" name="fruit" value="orange" onclick="check(this)">橙子</label>

<script>
function check(obj) {
    var inputs = document.getElementsByName("fruit");
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i] != obj) {
            inputs[i].checked = false;
        }
    }
}
</script>

在上面的示例代码中，我们给每个多选框设置相同的name属性值“fruit”，使它们相互关联。然后使用JavaScript实现单选效果，当多选框被选中时，遍历所有的多选框，如果当前多选框不是选中状态，则将其他多选框设置为非选中状态。

3. 使用CSS实现单选效果

我们也可以使用CSS来实现多选框的单选效果，将所有的多选框设置为不可见，然后将选中的多选框设置为可见。示例代码如下：

<style>
input[type="checkbox"] {
    display: none;
}

input[type="checkbox"]:checked + label {
    background-color: #ddd;
}

input[type="checkbox"]:checked + label::before {
    content: "\2713";
    display: inline-block;
    margin-right: 5px;
}
</style>

<input type="checkbox" id="checkbox1" name="fruit" value="apple">
<label for="checkbox1">苹果</label>
<input type="checkbox" id="checkbox2" name="fruit" value="banana">
<label for="checkbox2">香蕉</label>
<input type="checkbox" id="checkbox3" name="fruit" value="orange">
<label for="checkbox3">橙子</label>

在上面的示例中，我们使用CSS将所有的多选框设置为不可见（display:none），然后使用“+”选择器和标签的“for”属性，将选中的多选框设置为可见。同时，我们给选中的多选框添加了一个tick标识，并改变了它的背景颜色。

以上就是“input:checkbox多选框实现单选效果跟radio一样”的完整攻略。