Retrieve values from checkbox ajax php javascript - php

Question

I have this code in html:
<form id='status_service' method='post' accept-charset='UTF-8' name='status_form'>
<fieldset>
<label class="cb-enable"><span>On</span></label>
<label class="cb-disable selected "><span>Off</span></label>
<input type="checkbox" id="id_sf_checkbox" class="checkbox" value="1" name="checkbox" onChange="document.getElementById('status_service').submit(); window.location.reload(true)"/>
<label class="cb-enable"><span>On</span></label>
<label class="cb-disable selected "><span>Off</span></label>
<input type="checkbox" id="id_sf_checkbox" class="checkbox" value="2" name="checkbox" onChange="document.getElementById('status_service').submit(); window.location.reload(true)"/>
<label class="cb-enable "><span>On</span></label>
<label class="cb-disable selected "><span>Off</span></label>
<input type="checkbox" id="id_sf_checkbox" class="checkbox" value="3" name="checkbox" onChange="document.getElementById('status_service').submit(); window.location.reload(true)"/>
<label class="cb-enable "><span>On</span></label>
<label class="cb-disable selected "><span>Off</span></label>
<input type="checkbox" id="id_sf_checkbox" class="checkbox" value="4" name="checkbox" onChange="document.getElementById('status_service').submit(); window.location.reload(true)"/>
</fieldset>
</form>
It creates a iphone styled button (ON/OFF), using CSS for activate/desactivate the service (the value corresponds the id_service the user wants to modify)
I would retrieve this using this code, but, what's wrong:
$(document).ready( function()
{
$(".cb-enable").click(function()
{
var parent = $(this).parents('.switch');
$('.cb-disable',parent).removeClass('selected');
$(this).addClass('selected');
$('.id_sf_checkbox',parent).attr('checked', true);
alert("Checkbox enabled");
alert($("input[name=checkbo]:checked").map(function () {return this.value;}).get().join(","));
$('.ajaxgif').removeClass('hide');
var checkbox = new Array();
$("input:checked").each(function()
{
data['checkbox[]'].push($(this).val());
});
alert(checkbox);
$.ajax({
type: "POST",
url: "../proceso_checkboxes.php",
data: {checkbox:checkbox},
success: function()
{
$('.ajaxgif').hide();
$('.msg').text('Mensaje enviado!').addClass('msg_ok').animate({ 'right' : '130px' }, 300);
},
error: function()
{
$('.ajaxgif').hide();
$('.msg').text('Hubo un error!').addClass('msg_error').animate({ 'right' : '130px' }, 300);
}
});
});
$(".cb-disable").click(function()
{
var parent = $(this).parents('.switch');
$('.cb-enable',parent).removeClass('selected');
$(this).addClass('selected');
$('.id_sf_checkbox',parent).attr('checked', false);
alert("Checkbox disabled");
showSelectedValues();
});
$("input[type=checkbox][id=id_sf_checkbox][checked]").each(function()
{
var parent = $(this).parents(".switch");
$(".cb-enable",parent).addClass("selected");
$(".cb-disable",parent).removeClass("selected");
});
});
My objective is to send the values of the checkbox to the php, but in the javascript alerts function shows blank, no values, and i do not know what's wrong, i've been looking a solution, and tested, but stills appears blank.
Any help? thanks in advance.
Attached below the CSS code about the checkboxes:
/* Checkboxes */
span.jqTransformCheckboxWrapper {display:block;float:left}
a.jqTransformCheckbox {background:transparent url(../images/checkbox.gif) no-repeat left -30px;vertical-align:middle;height:17px;width:17px;display:block;/*display:-moz-inline-block;*/}
/* Checked - Used for both Radio and Checkbox */
a.jqTransformChecked {background-position:left top}
/* Hidden - used to hide the original form elements */
.jqTransformHidden {display:none}
/* Formulario de login-home status service form */
#status_service .cb-enable, .cb-disable, .cb-enable span, .cb-disable span { background: url(../images/switch.gif) repeat-x; display: block; float: left; }
#status_service .cb-enable span, .cb-disable span { line-height: 30px; display: block; background-repeat: no-repeat; font-weight: bold; }
#status_service .cb-enable span { background-position: left -90px; padding: 0 10px; }
#status_service .cb-disable span { background-position: right -180px;padding: 0 10px; }
#status_service .cb-disable.selected { background-position: 0 -30px; }
#status_service .cb-disable.selected span { background-position: right -210px; color: #fff; }
#status_service .cb-enable.selected { background-position: 0 -60px; }
#status_service .cb-enable.selected span { background-position: left -150px; color: #fff; }
#status_service .switch label { cursor: pointer; }
#status_service .switch input { display: none; }
/* Mod para AJAX gif */
#status_service .ultimo{ margin-bottom: 0; position: relative; }
/* AJAX Gif y mensajes de exito o fracaso */
#status_service .hide{display: none; }
#status_service .ajaxgif{position: absolute; right: 150px; top: 5px; }
#status_service .msg{color: white; font-weight: bold; height: 32px; line-height: 32px; padding: 0 10px; position: absolute; right: -155px; text-transform: uppercase; min-width: 121px; }
#status_service .msg_ok{background: #589D05; }
#status_service .msg_error{background: red; }

Answer 1

You are missing an x in your selector.
alert($("input[name=checkbox]:checked")
----------^

Answer 2

Simply make checkbox as array, it will give you all checkboxes checked in an array.
var checkbox = new Array();
$("input:checked").each(function()
{
checkbox.push($(this).val());
});
alert(checkbox);