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

您不必设置已检查的属性

看看这个http://jsfiddle.net/fxzD7/1/

Answer 3

修改： 请按原样试试，如果您收到任何控制台错误，请告诉我。

$(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();
        }
    });
});

结束编辑 $（this）.attr（{checked：false}）;

不需要。点击功能不会覆盖复选框的默认功能。

Answer 4

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

我仍然不明白问题的来源和超时功能不是最好的方法，但我现在找不到另一个......

jquery取消选中复选框问题

4 个答案: