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

サービスをアクティブ化/非アクティブ化するために CSS を使用して、iPhone スタイルのボタン (オン/オフ) を作成します (値は、ユーザーが変更したい 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 に答える