繁体   English   中英

jQuery如何从选中的复选框获取数组

[英]Jquery how to get array from checked checkboxes

我需要将数据作为数组传递给JQuery中的fancybox实例。

传递的格式应如下所示: Array( [remove] => Array ( [1] => 1 [109] => 109 [110] => 110 ))

现在,我使用下面的代码,但是由于我没有传递数组,所以这行不通。

提前致谢...

复选框如下所示,并在数据库结果中生成:

<td class="checkboxTable"><input name="remove[<?php echo $users->id; ?>]" type="checkbox" id="checkbox[]" value="<?php echo $users->id; ?>"/></td>

我使用的JavaScript是这样的:

$('.deleteConfirmationMultiple').Loader({
    url: ['/dgpcms/public/fancybox/jquery.fancybox-1.3.2.pack.js',
        '/dgpcms/public/fancybox/jquery.easing-1.3.pack.js',
        '/dgpcms/public/fancybox/jquery.mousewheel-3.0.4.pack.js',
        '/dgpcms/public/fancybox/jquery.fancybox-1.3.2.css'],
    ////debug: [true],
    cache: [true],
    success: function(target){
        $(this).fancybox({
            'autoDimensions'    : true,
            'autoScale'         : true,
            'overlayOpacity'    : '0.70',
            'overlayColor'      : '#000000',
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'hideOnOverlayClick': false,
            'hideOnContentClick': false,
            'showCloseButton'   : false,
            'href'              : $('#deleteConfirmation').attr('action'),
            ajax : {
                    type    : 'POST',
                    data    : $('input:checkbox:checked')
                }
        });
    }
}); 

有没有一种方法可以完全按照PHP的方式传递值(像这样: Array ( [remove] => Array ( [1] => 1 [109] => 109 [110] => 110 ) [deleteMultiple] => Delete selected ) )?

编辑2011年1月12日

我走了一点,但是nof有一个奇怪的问题。

我的ajax调用中没有将ID作为数据发布。 当我为checkall链接创建一个onclick函数(选中所有复选框)并调用getData函数并警告结果时,我得到了选中框的ID。 但是在我的ajax调用中调用该函数将返回空...

这是代码:

$('.deleteConfirmationMultiple').Loader({
    url: ['/dgpcms/public/fancybox/jquery.fancybox-1.3.2.pack.js',
        '/dgpcms/public/fancybox/jquery.easing-1.3.pack.js',
        '/dgpcms/public/fancybox/jquery.mousewheel-3.0.4.pack.js',
        '/dgpcms/public/fancybox/jquery.fancybox-1.3.2.css'],
    ////debug: [true],
    cache: [true],
    success: function(target){
        // Array( [remove] => Array ( [1] => 1 [109] => 109 [110] => 110 ))
        // var id = {5: '5', 6: '6', 7: '7'};

        var id = '';
        $.fn.getData = function(options){
            var id = $('input:checkbox:checked').map(function(){
                return this.value.serialize();
            }).get();
            //alert(id);
            return id;
        };

        $(this).fancybox({
            'autoDimensions'    : true,
            'autoScale'         : true,
            'overlayOpacity'    : '0.70',
            'overlayColor'      : '#000000',
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'hideOnOverlayClick': false,
            'hideOnContentClick': false,
            'showCloseButton'   : false,
            'href'              : $('#deleteConfirmation').attr('action'),
            ajax : {
                    type    : 'POST',
                    data    : {'remove':id}
                    }
        });         
    }
}); 

编辑2010年1月12日

下面的代码包含一个经过硬编码的数组,完全可以按照我的要求工作,现在,我需要从选中的复选框中创建相同的内容。

var id = {5: '5', 6: '6', 7: '7'};

        $(this).fancybox({
            'autoDimensions'    : true,
            'autoScale'         : true,
            'overlayOpacity'    : '0.70',
            'overlayColor'      : '#000000',
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'hideOnOverlayClick': false,
            'hideOnContentClick': false,
            'showCloseButton'   : false,
            'href'              : $('#deleteConfirmation').attr('action'),
            ajax : {
                    type    : 'POST',
                    data    : {'remove':id}
                    }
        });     

我不确定您要传递的确切格式,但是要获取一个数组而不只是这个:

$('input:checkbox:checked')

...获取一组元素(一个jQuery对象),使用.map()获取其值的数组,如下所示:

$('input:checkbox:checked').map(function() { return this.value; }).get();

您可以为此使用.map()

var data = $('input:checkbox:checked').map(function(){
    return this.value;
}).get();

这将给出格式为['109', '110']的数组。

通过再次检查所有内容,并使用fancybox登录示例,我想到了以下代码,该代码正是我想要的:

$('.deleteConfirmationMultiple').Loader({
    url: ['/dgpcms/public/fancybox/jquery.fancybox-1.3.2.pack.js',
        '/dgpcms/public/fancybox/jquery.easing-1.3.pack.js',
        '/dgpcms/public/fancybox/jquery.mousewheel-3.0.4.pack.js',
        '/dgpcms/public/fancybox/jquery.fancybox-1.3.2.css'],
    //debug: [true],
    cache: [true],
    success: function(target){

        $(this).click(function()
        {
            var id = $('input:checkbox:checked').map(function(){
                return this.value;
            }).get();
            //alert(id);

            $.ajax({
                type    : "POST",
                url     : $('#deleteConfirmation').attr('action'),
                data    : {'remove':id},
                success: function(data) {
                    $.fancybox(data,
                    {
                        'autoDimensions'    : true,
                        'autoScale'         : true,
                        'overlayOpacity'    : '0.70',
                        'overlayColor'      : '#000000',
                        'transitionIn'      : 'none',
                        'transitionOut'     : 'none',
                        'hideOnOverlayClick': false,
                        'hideOnContentClick': false,
                        'showCloseButton'   : false
                    });
                }
            });
            return false;
        });
    }
}); 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM