-2

我在 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 样式的按钮（开/关），使用 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; }
4

2 回答 2

1

您的选择器中缺少一个x。

alert($("input[name=checkbox]:checked")
                 ----------^
于 2012-08-14T14:55:09.047 回答
0

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

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

alert(checkbox);
于 2012-08-14T14:59:28.150 回答