Question

我正在查看以下示例登录表单：

请注意底部有一个'Remember'精灵。基本上，在两态图像下面有一个隐藏的复选框。单击图像时，它将变为绿色检查或滑动为红色“x”。查看复选框的DOM状态时，该值不会更改（默认值为“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;
}

Answer 1

无论选中状态如何，都希望复选框值保持为1。在经典形式中，检查状态确定是否发送值，而不是如果提交包含1或0.您正在寻找的是“已检查”属性。

设置选中的属性：

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

获得“检查”状态：

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

从我所知道的，除了在无限循环中按时间间隔检查之外，没有简单的方法来检查属性更改，但我确定你不需要这样做。单击标签应更改“已选中”属性复选框。如果您需要1或0值而不是“1或无”，您可以收听复选框“更改”事件并阻止取消检查，但如果值为1，则将值更改为0，反之亦然。

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

但是，阻止更改也会取消基于checked属性的任何样式，因此您必须以另一种方式引用已检查状态：使用

进行css

input[value=1] + label

或者您可以添加一小段代码来切换自定义类

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

并从css中引用它：

input.checked + label

Answer 2

值的复选框更改永远不会显示在dom上。取决于表单发送后您的操作，您只需在提交表单后检查值，例如使用php $_POST['checkbox']

如果您必须在发送表单之前知道该值，您可以执行以下操作：

$('#checkbox').attr('checked');

Answer 3

这可能是一个解决方案：

'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只是继续在其中执行lambda并基于if - 语句它将执行某些操作，或者根本不执行任何操作。这里的问题可能是事件数据对象的“默认”缺失。如果您（如鼠标位置），您可以手动获取这些值。

祝你好运！

JQuery：检测css状态变化

3 个答案: