0

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

登录表格。

请注意，底部有一个“记住”精灵。本质上，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 或 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
于 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只是继续执行其中的 lambda 并基于if-statement 它会做某事，或者什么都不做。这里的问题可能是“默认”缺少事件数据对象。如果您愿意（例如鼠标位置），您可以手动获取这些值。

祝你好运！

于 2013-03-26T15:44:53.207 回答