jquery取消选中复选框问题

发布于 2024-11-29 17:56:08 字数 1715 浏览 1 评论 0原文

我有一个复选框和一个带有默认值的输入字段,提供有关写入内容的信息。如果选中该复选框,则光标应位于输入字段中,并且该输入字段应为空。如果我取消选中该复选框,默认值应该再次可见。

这是我的复选框代码:

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

//edit start 我还有更多代码,也许错误就在这部分(首先我认为它不相关,但也许是,抱歉)

当我直接单击输入字段、复选框时,应该执行以下操作(也可以正常工作)已选中,当我将其保留为无内容时,复选框未选中,默认文本值“您的城市...”位于输入字段内,当我输入其他文本时,复选框仍处于选中状态。当我取消选中该框时,默认值位于输入字段内。唯一的问题是,当输入字段为空并且我取消选中复选框时...它将不起作用

  !$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

它工作正常,选中该框并将光标设置为 input#city,但如果我取消选中该框,只要我按下鼠标左键(框未选中且输入字段中的默认值),它就会像它应该的那样工作,但是在按钮抬起后,该框会再次被选中并且输入字段为空。当我取消选中该框并在将鼠标左键按出复选框区域的同时将光标移动时,它也可以正常工作。

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

百善笑为先 2024-12-06 17:56:08

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

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

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

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

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

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");
洋洋洒洒 2024-12-06 17:56:08

您不必设置选中的属性

看看这个 http://jsfiddle.net/fxzD7/1/< /a>

You dont have to set the checked property

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

夏の忆 2024-12-06 17:56:08

编辑:
请按原样尝试,如果您收到任何控制台错误,请告诉我。

$(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({检查: false});

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

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.

烟若柳尘 2024-12-06 17:56:08

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

我仍然不明白问题从何而来,超时功能不是最好的方法,但我找不到另一个方法眼下...

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文