jquery取消选中复选框问题

Question

我有一个复选框,以及一个默认值的输入字段,提供有关写入内容的信息.如果选中该复选框,则光标应在输入字段中处于焦点位置,并且应该为空.如果取消选中该复选框,则应再次显示默认值.

那是我的复选框代码:

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

我有以下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}); 
    }
 });

//编辑开始我有更多的代码,也许错误是在这一部分(首先我认为它不相关,但也许是,抱歉)

当我直接点击输入字段时,我应该执行以下操作(也可以正常工作),选中复选框,当我不带内容时,复选框未选中,默认文本值"你的城市......"在输入字段内,当我输入时其他一些文本,复选框被逐步检查.当我取消选中该框时,默认值在输入字段内.唯一的问题是,当inputfield为空时我取消选中复选框...它将无效

  !$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');

//编辑结束

它工作正常,检查框并将光标设置为输入#city,但是如果我取消选中该框,只要我按下鼠标左键(未选中框和输入字段中的默认值),它就会按原样运行,但是按钮上升后,再次检查该框,输入字段为空.当我取消选中该框并在按下鼠标左键从复选框区域移动时移动光标,它也可以正常工作.

Answer 1

如果您使用的是jquery 1.6.0或更高版本,请替换

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

同

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

否则,如果您使用的是旧版本的jquery,请使用

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

Answer 2

好吧，我解决了，问题是模糊部分和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);
        }
    });

我仍然不太明白问题出在哪里，超时功能不是最好的方法，但我目前找不到另一个方法......