Question

我在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>

它创建一个iphone风格的按钮（ON / OFF），使用CSS激活/停用服务（该值对应用户想要修改的id_service）

我会使用这段代码检索这个，但是，出了什么问题：

$(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");
});
});

我的目标是将复选框的值发送到php，但在javascript警报功能显示空白，没有值，我不知道什么是错的，我一直在寻找解决方案，并进行测试，但仍然显得空白。

有任何帮助吗？提前谢谢。

附在CSS代码下方的复选框：

/* 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

您的选择器中缺少x。

alert($("input[name=checkbox]:checked")
                 ----------^

Answer 2

只需将checkbox作为数组，它将为您提供在数组中选中的所有复选框。

var checkbox = new Array();
$("input:checked").each(function()
{
    checkbox.push($(this).val());
});

alert(checkbox);

从复选框ajax php javascript中检索值

2 个答案: