Question

我需要运行一个功能，使复选框的行为类似于单选按钮。我知道，长话故事。无论如何，我想让它更易于重复使用，而不必为每个组重写它。我有这样的工作：

$(function() {
    var $apples = $('input.apples');
    $apples.click(function() {
        $apples.removeAttr('checked');
        $(this).attr('checked', true);
    });
});

如何让这个更加全局化，以便如果我有另一组复选框.bannanas它也适用于它们而不必重写它？

THX

Answer 1

制作一个插件：

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

(function($) {
    $.fn.makeRadios = function() {
        var $items = this;
        return this.click(function() {
            $items.removeAttr('checked');
            $(this).attr('checked', true);
        });
    };
})( jQuery );

$('input.apples').makeRadios();
$('input.bananas').makeRadios();

编辑：根据以下评论中的要求，要取消选中双击复选框，请执行以下操作：

示例： http://jsfiddle.net/YbGtE/3/

(function($) {
    $.fn.makeRadios = function() {
        var $items = this;
        return this.click(function() {
            $items.removeAttr('checked');
            $(this).attr('checked', true);
        }).dblclick(function() {
            $items.removeAttr('checked');
        });
    };
})( jQuery );

$('input.apples').makeRadios();
$('input.bananas').makeRadios();

Answer 2

使用选择器：

'input:checkbox'

或者，如果只应更改某些复选框，请在选择器中添加一个类：

'input:checkbox.makeRadio'

将该类添加到您想要更改的复选框中。

Answer 3

如果您假设每组复选框都具有相同的class属性，则可以使用以下内容自动执行此操作：

$(function() {
    var checkboxes = $('input:checkbox.asRadio');
    checkboxes.click(function() {
        var myClass = $(this).attr('class');
        checkboxes.each(function() {
            if($(this).attr('class') == myClass) $(this).removeAttr('checked');
        });
        $(this).attr('checked', true);
    });
});

您希望表现为无线电字段的复选框还包含'asRadio'类。

使功能更易于重复使用

3 个答案: