0

次のサンプルログオンフォームを見ています。

ログオンフォーム。

下部に「Remember」スプライトがあることに注意してください。基本的に、2つの状態の画像の下に非表示のチェックボックスがあります。画像をクリックすると、緑色のチェックに変わるか、赤色の「x」にスライドします。チェックボックスのDOM状態を表示する場合、値は変更されません（デフォルトはvalue = "1"）。これを使用する場合、チェックボックスの値を変更できるように、画像の状態変化を検出するためにどのJQueryを使用しますか？

フォームHTMLは次のとおりです。

        <div id="logonForm">
            <div id="box">
                <div class="elements">
                    <div class="avatar"></div>
                    <form action="" method="post">
                        <input type="text"      id="un" name="username" class="username" placeholder="Username" />
                        <input type="password"  id="pw" name="password" class="password" placeholder="•••••••••" />
                        <div class="checkbox">
                            <!-- here is the CHECK-BOX that I need to change value with JQuery -->
                            <input id="check" name="checkbox" type="checkbox" value="1" />
                            <label for="check">Remember?</label>
                        </div>
                        <div class="remember">Remember?</div>
                        <input type="button" id="login" name="submit" class="submit" value="Sign In" />
                    </form>
                </div>
            </div>

フォームのチェックボックスとラベル（作成者が提供）のCSSは次のとおりです。

.checkbox {
    display: block;
    width: 40px;
    height: 15px;
    overflow: hidden;
    border-radius: 5px;
float:left;
margin:5px 0 0 0;5
}   
input[type=checkbox] {
    display: none;
}
input[type=checkbox] + label {
    text-indent: -9999px;
    display: block;
    width: 40px;
    height: 15px;
    line-height: 15px;
    background: transparent url(../images/checkboxfield.png) no-repeat;
    -webkit-transition: background-position 0.3s ease-in-out;
    -moz-transition: background-position 0.3s ease-in-out;
}
input[type=checkbox]:checked + label {
    -webkit-transition: background-position 0.3s ease-in-out;
    -moz-transition: background-position 0.3s ease-in-out;
    background-position:-26px;
}
4

3 に答える 3

1

チェックされた状態に関係なく、チェックボックスの値は1のままであることが期待されます。古典的な形式では、チェックされた状態は、値が送信されるかどうかを決定し、送信に1または0が含まれるかどうかは決定しません。探しているのは、おそらく「チェック済み」属性です。

チェックされた属性の設定：

$('#check').attr('checked', true);

「チェック済み」状態の取得：

$('#check').attr('checked'); // returns true / false

私が知っていることから、無限ループで間隔を置いてチェックする以外にプロパティの変更をチェックする簡単な方法はありませんが、それを行う必要はないと確信しています。ラベルをクリックすると、チェックボックスの「チェック済み」属性が変更されます。「1またはnothing」ではなく1または0の値が必要な場合は、チェックボックス「change」イベントをリッスンしてチェック解除を防ぐことができますが、1の場合は値を0に変更し、その逆も可能です。

$('#check').change(function(event){
    event.PreventDefault();
    $(this).val( ( $(this).val(  ) + 1 ) % 2 );
});

ただし、変更を防ぐと、チェックされたプロパティに基づくスタイリングもキャンセルされるため、別の方法でチェックされた状態を参照する必要があります。

input[value=1] + label

または、小さなコードを追加してカスタムクラスを切り替えることもできます

$('#check').change(function(event){
    event.PreventDefault();
    $(this).val( ( $(this).val(  ) + 1 ) % 2 );
    $(this).toggleClass('checked');
});

そしてこのようにcssからそれを参照してください：

input.checked + label
于 2013-03-26T16:03:56.530 に答える
0

チェックボックスの値の変更は、domに表示されることはありません。フォームが送信された後に何をするかに応じて、フォームが送信された後、たとえばphpを使用して値を確認するだけです。$_POST['checkbox']

フォームを送信する前に値を知る必要がある場合は、次のことができます。

$('#checkbox').attr('checked');
于 2013-03-26T15:38:12.793 に答える
0

これは解決策かもしれません：

'use strict';
$(document).ready(function(){

    var buffer = $('#yourDiv').css('height');

    setInterval(function(){
        var height = $('#yourDiv').css('height');

        if (height != buffer) {
            $('#yourDiv').html('The height changed from ' + height + ' to ' + buffer);
            buffer = $('#yourDiv').css('height');
        }
    }, 100);

    $('#yourDiv').click(function(){
        $(this).css('height', (Math.random(1) * 501) + 'px');
    });
});

このフィドルを確認してください：http：//jsfiddle.net/sma3y/7/

ここで実際に起こることは、私が主にanonymous listener;）と呼んでいるものです。

setIntervalその中でラムダを実行し続けるだけで、-ステートメントに基づいてif何かを実行するか、まったく実行しません。ここでの問題は、イベントデータオブジェクトの「デフォルト」の欠如である可能性があります。（マウスの位置のように）必要な場合は、これらの値をほとんど手動で取得できます。

幸運を！

于 2013-03-26T15:44:53.207 に答える