javascript - 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 自己的。只有选中的属性会反映和控制复选框的当前状态。不应该使用选中属性来控制复选框状态。

Answer 2

我在 IE8 及更低版本中看到了一些带有选中属性的有趣的东西。在某些情况下，我不得不同时设置属性和属性，即使现代浏览器似乎只需调整属性就可以了：

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

请注意，仅当您遇到任何与浏览器相关的不一致时才需要执行以下操作。

if(textbox.val()!="") 
{
    checkbox.attr('checked','checked');
}
else
{
    checkbox.removeAttr('checked');
}

Answer 3

考虑类似的事情：

function doSomething(el) {
    el.form['check-' + el.name.split('-')[1]].checked = !!el.value;
}


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