使用jQuery复选框不规则

Question

这是一些HTML:

<form>
    <input type="checkbox" id="check-123" />
    <input type="text" id="text-123" onchange="doSomething('123')" />
</form>

这里有一些javascript:

function doSomething(key)
{
    var textbox = $('#text-'+key);
    var checkbox = $('#check-'+key);
    checkbox.attr('checked',(textbox.val()!="") );
}

我的目标是在文本框中的任何时候检查复选框,并取消选中该值的时间.这似乎在html中工作正常(我可以看到checked="checked"被添加到复选框中),但只有在文本框中第一次输入内容时才会显示复选框.

为什么即使checked="checked"添加到html中,复选框也会显示未选中状态？

Answer 1

使用元素属性而不是属性来通过javascript更改其状态

checkbox.prop('checked',(textbox.val()!="") );

从.attr()和.prop()上的jQuery文档:

从jQuery 1.6开始,.attr()方法为尚未设置的属性返回undefined.要检索和更改DOM属性(如表单元素的已检查,已选择或已禁用状态),请使用.prop()方法.

重点是jQuery自己的.只有checked 属性才会反映并控制复选框的当前状态.checked 属性不应用于控制复选框状态.