Dom和jQuery的反选和全选比较
1．思路
全选的思路是：当点击某个复选框或按钮的时候，可能会触发的有两种可能，可以是全选或者是全不选，所以要做一下判定，然后根据是全选或者是全不选来设定属性值。
反选的思路是：当点击某个复选框或按钮是，把没有选中的选中，选中的让它处于不选的状态。
2．举例
以以下的html为例：
<body>
<div align="center">
你爱好的运动是：<br/>
<input type="checkbox" id="all"/>全选/全不选<br/>
<input type="checkbox" id="fanSel" value="反选"/>
<div id="favs">
<input type="checkbox"/>足球
<input type="checkbox"/>篮球
<input type="checkbox"/>羽毛球
<input type="checkbox"/>乒乓球
</div>
<div>
</div>
</div>
</body>
（1）首先来看一下用dom知识来实现的全选和反选：
1. 获取dom元素的值来实现全选和全不选
2. window.onload = function(){
3.
4. var qxNode = document.getElementById("all");
5. var fxNode = document.getElementById("fanSel ");
6.
7. var inputNodes = get("favs ").getElementsByTagName("input");
8. //全选的功能
9. qxNode.onclick = function(){
10. if (this.checked) {
11. for (var i = 0; i < inputNodes.length; i++) {
12. inputNodes[i].checked = "checked";
13. }
14. }
15. else {
16. for (var i = 0; i < inputNodes.length; i++) {
17. inputNodes[i].checked = null;
18. }
19. }
20. }
21.
22. //反选的功能
23. fxNode.onclick = function(){
24. for (var i = 0; i < inputNodes.length; i++) {
25. if (inputNodes[i].checked) {
26. inputNodes[i].checked = null;
27. }
28. else {
29. inputNodes[i].checked = "checked";
30. }
31. }
32. }
33. }
（2）用jQuery来实现全选和反选的功能：
$(document).ready(function(){
//全选和全不选
$("#all").click(function(){
if(this.checked){
$("#favs>input").attr("checked","checked");
}else{
$("#favs>input").attr("checked",null);
}
});
//反选
$("#fanSel").click(function(){
var $ipt = $("#favs>input");
$ipt.each(function(index,iptDom){
if(iptDom.checked){
iptDom.checked = null;
}else{
iptDom.checked = "checked";
}
});
});
});
3．总结
从以上的代码中我们可以看出用jQuery写的代码要比用dom写要简单的多，值得注意的是jQuery中的属性和方法在dom中不可以用，dom中的元素和方法在jQuery中也不可用。
1．在dom中的设置全选和全不选的为：
inputNodes[i].checked = "checked";
在jQuery中的设置全选和全不选的为：
$("#favs>input").attr("checked","checked");
可以看出用jQuery是相当的省力
2．反选的时候如果是dom要通过for循环遍历，而在jQuery中也是遍历，不过方法是封装好的，用each就可以获得到该元素的index和dom值，在这里我们说一下这两个值的使用，index相当于是for循环中的i，dom是在用到each方法的时候把jQuery对象转化为了dom对象。所以我们会看到以上的两个在反选的时候使用的方法是一样的。Each中的dom值是根据index的不同而改变的，在用each的时候用第二个参数较多，如果用index来进行反选的话为：
$ipt.each(function(index,iptDom){
if($ipt[index].checked){
$(this).attr("checked",null);
}else{
$(this).attr("checked","checked");
}
});
这个代码用的是index来判断的，但是明显的看出方法不如上一个简洁。最看不惯的是iptDom本来就是dom对象，$ipt[index]也就是把jQuery转换为了dom对象，还是方法没有理解的原因，这是我第一次写的时候摸索的过成写下的。感觉代码挺幼稚的！
在each中也可以使用 jQuery对象的方法，要用到dom和jQuery的转化，如果把dom对象转换为jQuery对象，只需在dom对象前加一个 $ 符号就可以，如果是把jQuery对象转换为dom对象，在jQuery对象后加get(index)或为[index]
举例为：
var $cr = $("#cr");
var cr = $cr[0]
var $cr = $("#cr");
var cr = $cr.get(0);
分享到：
相关推荐
jquery实现全选反选全不选案例，在入场网页开发中实现。
Jquery全选反选Checkbox 简单好用 复用性很好 欢迎下载
android listview的全选,反选,取消全选(直接拿来用)
jquery全选反选插件
jquery 、js实现复选框 (全选、反选)功能··
jQuery表格行全选反选单选代码，例子采用bootstrap格式，可以选择自定义。
很好用的使用jquery来实现的通用的全选反选功能
jquery、js操作checkbox全选反选.docx
JQuery实现checkbox的全选取消全选
这是Jquery的全选和反选功能的实现，并且在全选时能改变成取消全选
jQuery全选、反选与获取选中值 jQuery全选、反选与获取选中值 jQuery全选、反选与获取选中值 jQuery全选、反选与获取选中值
纯Jquery表格全选+反选+增删查找,一个简陋版本，仅供参考，细节处理不周到处请评论，后期有空修改
js实现全选和反选功能 js实现全选和反选功能 js实现全选和反选功能 js实现全选和反选功能 js实现全选和反选功能
jquery Checkbox 全选 反选 全不选 多种实现方法 和表单验证
静态图通过jquery实现全选反选取消删除功能。
jquery复选框的全选反选等操作
JS实现全选反选全不选
jQuery下拉框可搜索 全选反选插件ASelect.js.zip
一个基于jQuery 实现的的全选、反选复选框插件源码例子
listview中adapter里的checkbox反选、全选、全不选