选中并取消选中复选框

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 here.

---

纯JavaScript：

在纯JavaScript，你可以使用.checked属性：

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

取消选中你只需使用：

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

​​

Answer 2

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

而你正在设置一个布尔值，所以你不应该使用字符串来设置属性的值。

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

Answer 3

您也可以直接解决的元素属性：

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

JsFiddle演示

Answer 4

这是工作......

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

Answer 5

更好地利用本地JavaScript性能 其清晰并始终工作

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