javascript - 选中和取消选中复选框

Question

如何正确选中和取消选中复选框？我有很多麻烦。

这是我的代码http://jsfiddle.net/N5Swt/：

<input type="checkbox" id="checkbox1" /> <span> Check me! </span>

// test1
/*$('#checkbox1').attr('checked','true');
$('#checkbox1').attr('checked','false');*/ // This line doesnt work

// test2
$('#checkbox1').attr('checked','true');
$('#checkbox1').removeAttr('checked');
$('#checkbox1').attr('checked','true'); //This line doesnt work

它不起作用。为什么？

Answer 1

jQuery：

你可以使用 jQuery 的prop()代替：

$('#checkbox1').prop('checked', true);

取消选中您只需使用：

$('#checkbox1').prop('checked', false);

jsFiddle在这里。

---

纯Javascript：

在纯 Javascript 中，您可以使用 .checked 属性：

document.getElementById('checkbox1').checked = true;

取消选中您只需使用：

document.getElementById('checkbox1').checked = false;

jsFiddle在这里。

Answer 2

您应该使用prop()来设置复选框值而不是 attr。

而且您正在设置一个布尔值，因此您不应该使用字符串来设置属性的值。

$('#checkbox1').prop('checked',false);

Answer 3

您还可以直接处理元素属性：

document.querySelector('#checkbox1').checked = true;
// or
$('#checkbox1')[0].checked = true;

JsFiddle演示

Answer 4

更好地使用原生 javascript 属性，它清晰且始终有效

$('#checkbox1')[0].checked = true;

Answer 5

这是工作...

$('#checkbox1').attr('checked',true);
$('#checkbox1').attr('checked',false);