![](/img/trans.png)
[英]How to get an array of class-names from a set of checked checkboxes using jQuery or JavaScript?
[英]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.