Jquery how to get array from checked checkboxes
I need to pass data as an array to a fancybox instance in JQuery.
The passed format needs to look like this: Array( [remove] => Array ( [1] => 1 [109] => 109 [110] => 110 ))
Now I use the following code, but this doesn't work because I'm not passing an array.
Thanks in advance...
Checkboxes look like this and are generated on the database results:
<td class="checkboxTable"><input name="remove[<?php echo $users->id; ?>]" type="checkbox" id="checkbox[]" value="<?php echo $users->id; ?>"/></td>
The javascript I use is this:
$('.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')
}
});
}
});
Is there a way to pass the values exactly as PHP would do it (like this: Array ( [remove] => Array ( [1] => 1 [109] => 109 [110] => 110 ) [deleteMultiple] => Delete selected )
)?
EDIT 12 Jan 2011
I got a bit further, but nof there is a weird problem..
Id isn't posted as data in my ajax call. When I create an onclick function for the checkall link (all checkboxes get selected) and call the getData function and alert the result, I get the id's of the checked boxes. But calling the function in my ajax call returns empty...
Here is the code:
$('.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}
}
});
}
});
Edit 12 Jan 2010
The code below, containing an array hardcoded works precisely as I want, Now I need to create the same thing from the checked checkboxes....
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}
}
});
I'm not sure the exact format you want to pass, but to get an array instead of just this:
$('input:checkbox:checked')
...which gets a set of elements (a jQuery object), use .map()
to get an array of their values, like this:
$('input:checkbox:checked').map(function() { return this.value; }).get();
You can use .map()
for this:
var data = $('input:checkbox:checked').map(function(){
return this.value;
}).get();
This will give an array of the format ['109', '110']
.
By reviewing everything again, and using the fancybox login example I came up with the following code which works precisely how I wanted:
$('.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;
});
}
});
精彩评论