jquery uncheck checkbox problem

i've got a checkbox, and an inputfield with a default value giving information about what to write into. if the checkbox is checked, the cursor should be on focus in the input field and it should be empty. if i uncheck the checkbox, the default value should be visible again.

that's my the checkbox code:

<input name="city" type="checkbox" id="checkcity"/> 
<input type="text" name="city" id="city" value="###VALUE_CITY###" />

and i've got the following jquery:

 var $city = $("input#city");
 var cityValue = "Your city...";

 !$city.val() && $city.val(cityValue);


  $('#checkcity').click(function(){
    if ($(this).is(':checked')) {
        $city.focus();
    } else {
        $city.val(cityValue);
        $(this).attr({checked: false}); 
    }
 });

//edit start i've got some more code, maybe the error is in this part (first i thought it'开发者_运维技巧s not relevant, but maybe it is, sorry)

this should do the following (what also works fine) when i click directly into the inputfield, checkbox is checked, when i leave it without content, checkbox is unchecked, default textvalue "your city..." is inside inputfield, when i enter some other text, checkbox is stilled checked. when i uncheck the box, default value is inside the inputfield. the only problem is, when inputfield is empty and i uncheck the checkbox... it won't work

  !$city.val() && $city.val(cityValue);
  $city.focus(function() { $city.val() == cityValue && $city.val("");$('#checkcity').attr({checked: true});});
  $city.blur(function() { 
        if ($city.val().length > 0 && $city.val() != cityValue){ 
            $('#checkcity').attr('checked', true);
            }                                                  
        if ($city.val() == "") {
            $('#checkcity').removeAttr('checked');
            $city.val(cityValue);
            }
        });

  $city.val() && $('#checkcity').attr('checked', true);
  $city.val() == cityValue && $('#checkcity').removeAttr('checked');

//edit end

It works fine, to check the box and set the cursor into input#city, but if i uncheck the box, it only works like it should as long as i press the left mousebutton down (box unchecked and default value in inputfield), but after the button goes up, the box is checked again und the inputfield is empty. When i uncheck the box and move the cursor during pressing down the left mousebutton out of the checkbox area, it also works fine.

If you are using jquery 1.6.0 or greater, replace

$(this).attr({checked: false});

with

$(this).prop("checked", false);

else, if you are using an older version of jquery, use

$(this).removeAttr("checked");

You dont have to set the checked property

Take a look at this http://jsfiddle.net/fxzD7/1/

EDIT: Please try this as-is, if you get any console errors let me know.

$(document).ready(function () {
    // Store textbox and string in variables
    var $city = $("input#city");
    var cityValue = "Your city...";

    // set the value on load
    $city.val(cityValue);

    // The click event for the checkbox
    $('#checkcity').click(function () {
        // If it is checked in this click then clear the textbox and focus
        if ($(this).attr("checked") == "checked") {
            $city.val("");
            $city.focus();
        }
        // If it is unchecked on this click then set the default string as value and blur
        else {
            $city.val(cityValue);
            $city.blur();
        }
    });
});

End EDIT $(this).attr({checked: false});

Is not needed. The click function does not override the default functionality of the checkbox.

ok i solved it, the problem was the blur part and the removeAttr('ckecked')

$city.blur(function() { 
    if ($city.val().length > 0 && $city.val() != cityValue){ 
        $('#checkcity').attr('checked', true);
        }                                                  
    if ($city.val() == "") {
        // caused the error:
        // $('#checkcity').removeAttr('checked');
        // changed to this:
    setTimeout(function(){
           $('#checkcity').attr('checked', false);
        }, 100);
        $city.val(cityValue);
        }
    });

i still don't really understand where the problem came from and the timeout-function is not the best way, but i can't find another one at the moment...