Question

我有以下jQuery代码使我的复选框像单选按钮一样，因此一次只能检查3个中的1个。

<script type="text/javascript" language="javascript">
$(document).ready(function() {
    $("#testing input:checkbox").change(function(){
        var checkname = $(this).attr("name");
        $("input:checkbox[name='" + checkname + "']").removeAttr("checked");
        this.checked = true;
    });
});
</script>

复选框的布局如下：

<input type="checkbox" id="testing" name="testing" value="B">
<input type="checkbox" id="testing" name="testing" value="I">
<input type="checkbox" id="testing" name="testing" value="A">

这正是我想要它工作的方式，而不是一个问题，除了一旦我点击其中一个，我无法取消它以便它们都没有被检查，这是我想要发生的，所以随着只能一次点击一个，我可以完全取消选中它们。

任何帮助都会很棒：）

Answer 1

如果this已checked，则仅运行取消选中其他人的代码。

示例： http://jsfiddle.net/CX5Th/1/

$("#testing input:checkbox").change(function() {
    if( this.checked ) {
        var checkname = $(this).attr("name");
        $("input:checkbox[name='" + checkname + "']").removeAttr("checked");
        this.checked = true;
    }
});

编辑：这是一个修订版，可以防止在您选择具有相同名称的框时取消选中新选中的框。它使用not()^(docs)排除当前复选框。

示例： http://jsfiddle.net/CX5Th/2/

$("#testing input:checkbox").change(function() {
    if (this.checked) {
        var checkname = $(this).attr("name");
        $("input:checkbox[name='" + checkname + "']").not(this).removeAttr("checked");
    }
});

Answer 2

少码！： - ）

var boxes = $("input:checkbox").click(function(){
    boxes.not(this).attr('checked', false);
});

http://jsfiddle.net/YqSXA/1/

Answer 3

$("input:checkbox").click(function(){
    var ischecked = $(this).attr('checked');
    $('input:checkbox').attr('checked',false);
    $(this).attr('checked', ischecked);
});

http://jsfiddle.net/yDPhv/

jQuery - 取消选中与单选按钮相似的复选框

3 个答案: