jquery取消选中复选框问题
我有一个复选框和一个带有默认值的输入字段,提供有关写入内容的信息。如果选中该复选框,则光标应位于输入字段中,并且该输入字段应为空。如果我取消选中该复选框,默认值应该再次可见。
这是我的复选框代码:
<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技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
如果您使用的是 jquery 1.6.0 或更高版本,请替换
为
else,如果您使用的是旧版本的 jquery,请使用
If you are using jquery 1.6.0 or greater, replace
with
else, if you are using an older version of jquery, use
您不必设置选中的属性
看看这个 http://jsfiddle.net/fxzD7/1/< /a>
You dont have to set the checked property
Take a look at this http://jsfiddle.net/fxzD7/1/
编辑:
请按原样尝试,如果您收到任何控制台错误,请告诉我。
结束编辑
$(this).attr({检查: false});
不需要。单击功能不会覆盖复选框的默认功能。
EDIT:
Please try this as-is, if you get any console errors let me know.
End EDIT
$(this).attr({checked: false});
Is not needed. The click function does not override the default functionality of the checkbox.
好吧,我解决了,问题是模糊部分和removeAttr('ckecked'),
我仍然不明白问题从何而来,超时功能不是最好的方法,但我找不到另一个方法眼下...
ok i solved it, the problem was the blur part and the removeAttr('ckecked')
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...