jquery uncheck checkbox problem

Question

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.

Solution 1

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...

Solution 2

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");

Solution 3

You dont have to set the checked property

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

Solution 4

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.

View more solutions

Comments

[vvohra87]

Hey i think you are missing some code... " !$city.val() && $city.val(cityValue); " seems out of place.

[sinini]

thats the short version for if $city has no value, the value is cityValue

[sinini]

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

[sinini]

but if i remove it and remove the cursor from the empty inputfield, the checkbox is still checked, somebody might has an idee? thx

[Josh Anderson]

I'm not sure which version, but before the prop method I also used to do $(this).removeAttr("checked"); to uncheck.

[sinini]

i think $(this).attr({checked: false}) is just like $(this).attr(checked, 'false'), i've tried to change it and there's the same error. i've also tried $(this).removeAttr("checked"); but i've got the same problem, but thanks anyway. the fact i don't understand is, that it works fine as long as i hold the button down :(

[Kevin B]

@Josh You are correct, fixing it above. Setting it to "false" actually makes it checked because any value presents a true value.

[sinini]

no change, i've added some more code from which i thought it's not necessary, but maybe it is

[sinini]

thanks for your efforts! i've tried it, but the condition "if ($(this).attr("checked") == "checked")" appartently never occurs, when i check the box, the inputvalue is still the default one... i found the errorline for my problem (in the comments of the question), but for some other reason this line would be needed, or at least replaced by a similar function

[rsbarro]

The prop method worked for me, but I had to put checked in quotes: $(this).prop("checked", false).

[AaronLS]

if ($(this).attr("checked") == "checked") should be if ($(this).attr("checked")) because the value of checked is not a string "checked" but instead true/false

[Kevin B]

@AaronLS Note however that is only true in versions of jQuery that improperly modify/retrieve properties with the .attr() method instead of attributes, such as 1.0-1.5.x and 1.6.1-1.8.x. in 1.9 and 1.6.0 .attr("checked") properly returns a string. jsfiddle.net/RBJZB

[sjkm]

Would upvote 1'000 times if I could - Thank you! Such a nasty thing - .attr('checked', false) still worked not long ago...