JQuery:检测CSS状态变化

Question

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

logon form .

请注意底部有一个“记住” Sprite 。本质上，在 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;
}

Answer 1

无论选中状态如何，复选框值都应保持为 1。在经典形式中，checked 状态决定值是否被发送，而如果提交包含 1 或 0 则不会。您正在寻找的可能是“checked”属性。

设置检查属性:

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

然而，阻止更改也会取消基于选中属性的任何样式，因此您必须以另一种方式引用选中状态:在 css 中使用

input[value=1] + label

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

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

并像这样从 css 中引用它:

input.checked + label