javascript - 使用 jquery 预设 html 复选框

Question

这段代码，

$("#x").removeAttr("checked").removeAttr("unchecked").attr("foo","bar");

结果在这个 html 输入中：

<input type="checkbox" id="x" foo="bar">

然而这个：

$("#x").removeAttr("checked").removeAttr("unchecked").attr("checked","true");

结果如下：

<input type="checkbox" id="x" checked="checked">

到底是怎么回事？尽管有这个 checked="checked" 属性，但复选框仍然顽固地未选中。

切换 HTML 输入的选中属性的最佳方法是什么？

score 5 · Accepted Answer

要切换选中的使用.prop()而不是.attr()：

$('#x').prop('checked',true);
$('#x').prop('checked',false);

如果您想要另一个按钮来切换复选框，您可以使用：

var $x  = $('#x'); // don't query every click - Credit: Roko :) 
$('.button').click(function(){      
    $x.prop('checked', !$x.is(':checked'));
})

score 1 · Accepted Answer

checked="true"是不正确的 HTML，因此 JQuery 将其隐式转换为checked="checked". 另一个答案提供了更好的解决方案，因为removeAttr在这种情况下不需要使用。

score 0 · Accepted Answer

$('#x')[0].checked = true; // true / false

切换：

var $cbx = $('#x')[0];

$('#toggle').click(function(){
  $cbx.checked = !$cbx.checked;
});