jquery数组存储复选框没有响应

Question

我有4组复选框，其中我将所有这4个分组到一个数组中，在我存储了组复选框之后，我无法将事件添加到那些框中，我想我是做错了..任何人纠正我的代码？

我想要的是当用户点击一个复选框，然后可以进一步检查组（允许最多4个），如果他们切换到其他组，则其他组需要取消选中，并且他们有权检查4他们选择了哪个小组。

我正在这样分组，然后我需要禁用并且无法分组以允许4个选择，任何好主意都可以完成此任务吗？

var geoGroup = [];

$('input:checkbox','#geography').each(function(i){
    if(typeof geoGroup[$(this).attr('name')] == 'undefined')
        geoGroup[$(this).attr('name')] = [];
    geoGroup[$(this).attr('name')].push($(this));

    $('input:checkbox',geoGroup[$(this).attr('name')]).live('click', function(){
        alert('hi')
    })
})

Answer 1

如果您使用的是jQuery 1.7，则不建议使用on()而不是live()。以下不使用数组，只需取消选中其他组即可。

假设每个组都包含在一个class ='checkgroup'

的容器中

演示：http://jsfiddle.net/dqQwB/1/

$('#geography').on('change', 'input:checkbox', function() {
    $('.checkgroup').not($(this).closest('.checkgroup')).find('input:checkbox').prop('checked', false);
});

Answer 2

经过小规模的清理，运行得很好。您的原始代码中存在一个小错误（在我的示例中重复），因为当数组项没有子项且因此不需要遍历时，您使用数组项的上下文进行遍历：http://jsfiddle.net/imsky/j87Sx/1/

var geoGroup = [];
$("input:checkbox", "#geography").each(function() {
    var name = $(this).attr("name");
    if (name != null) {
        geoGroup[name] = $(this);
        geoGroup[name].click(function() {
            alert("hello");
        });
    }
});

Answer 3

您不需要数组来实现您想要的效果。

        $('input:checkbox', "#geography").each(function(i){
            $(this).click(function(){ 
                var name = $(this).attr('name');
                $('input:checkbox', "#geography").each(function(i){
                    if($(this).attr('name') != name){
                        $(this).attr("checked", false);
                    }
                });
            })
        });