0

I am looking at the following sample logon form:

logon form.

Notice that there is a 'Remember' sprite at the bottom. Essentially, there is a hidden check-box below a 2-state image. When the image is clicked, it changes to either a green check or slides to a red 'x'. When viewing the DOM state of the check-box, the value does not change (defaults to value="1"). If I were to use this, what JQuery would I use to detect the state change of the image so that I can change the value of the check-box?

Here is the form 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>

Here is the css for the form check-box and label (provided by the author):

.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;
}
radi8
  • 528
  • 3
  • 12
  • 29
  • Possible duplicate: http://stackoverflow.com/questions/2157963/is-it-possible-to-listen-to-a-style-change-event –  Mar 26 '13 at 15:36

3 Answers3

1

It is expected of the checkbox value to remain 1 regardless of the checked state. In a classic form the checked state determins wether the value is sent or not, and not if the submission contains 1 or 0. What you're looking for is probabily the "checked" attribute.

setting checked attribute:

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

getting "checked" state:

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

from what I'm aware of there is no easy way of checking for a property change other than checking at intervals in an infinite loop but I'm prety certain you don't need to do that. Clicking the label should change the checkbox "checked" attribute. If you need 1 or 0 value and not a "1 or nothing" you could listen to the checkbox "change" event and prevent de-checking, but instead change value to 0 if it is 1, or vice-versa. 

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

However preventing the change also cancels any styling based on the checked property so you must refer to the checked state in another way: either in css using 

input[value=1] + label

or you could add a small piece of code to toggle a custom class

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

and refer to it from css like this:

input.checked + label
Liviu Gelea
  • 361
  • 2
  • 9
  • Thanks to all of you. I made the mistake of looking for the value to change and not looking at the 'checked' state. I appreciate all of your help in this. I learn something new everyday. – radi8 Mar 26 '13 at 16:46
0

The checkbox change of value is never shown at the dom. Depends on what you do after the form is sent you can simply check the value after the form is submitted e.g. with php $_POST['checkbox']

If you have to know the value before the form is sent, you can do:

$('#checkbox').attr('checked');
optimisticupdate
  • 1,689
  • 14
  • 19
  • I agree, but I was unsure of the best practice for doing so. When dealing with image state changes, especially shifting images which is more common in CSS, there should be a way to also link the image CSS 'position' with the check-box value. It is important for me to get this value via jQuery as I am doing some AJAX prior to posting the form and this value is important. – radi8 Mar 26 '13 at 15:43
  • See my edit, there is a simple solution for detecting the state of value. – optimisticupdate Mar 26 '13 at 15:44
  • You can get a boolean true/false by doing: $('#checkbox').is(':checked'); – Derek Mar 26 '13 at 15:44
0

This might be a solution:

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

Check this fiddle: http://jsfiddle.net/sma3y/7/

What practically happens here is something I mostly call a anonymous listener ;).

setInterval just keeps executing the lambda inside of it and based on the if-statement it will do something, or nothing at all. The problem here might be the "default" lack of the event data object. You could fetch those values mostly manual if you tho (like mouse positions).

Good luck!