CODEWITHSUNDEEP
jquerycheckboxclick
sinini
sinini

Reputation: 1433

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.

Upvotes: 5

Views: 20076

Answers (4)

Kevin B
Kevin B

Reputation: 95063

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

Upvotes: 19

sinini
sinini

Reputation: 1433

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

Upvotes: 1

vvohra87
vvohra87

Reputation: 5674

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.

Upvotes: 1

ShankarSangoli
ShankarSangoli

Reputation: 69915

You dont have to set the checked property

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

Upvotes: 1

Related Questions