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 中的选择器和...
本话题将深入探讨“jQuery全选反选插件”的相关知识点，这对于构建具有复选框全选和反选功能的用户界面非常有用。 首先，jQuery全选反选插件的核心功能是实现复选框的批量选择。在网页上，当用户需要对一组选项进行...
接下来，我们将使用jQuery来实现全选和反选功能。 全选功能可以通过监听全选Checkbox的`change`事件来实现，然后遍历所有子Checkbox并设置其`checked`属性： ```javascript $(document).ready(function() { $('#...
本教程将深入探讨如何使用jQuery实现全选和反选功能，这在多选列表或表格中非常常见，例如在批量处理数据时。 全选和反选功能的核心在于同步用户界面中的复选框状态。当用户点击一个主复选框（通常标记为“全选”）...
本文将详细介绍如何使用jQuery和纯JavaScript来实现Checkbox的全选与反选功能。 #### 二、基础知识回顾 ##### 1. Checkbox简介 Checkbox是一种允许用户进行多项选择的表单控件。每个Checkbox都有一个`checked`...
在处理树形结构的全选和反选时，我们需要遍历每个节点，检查其子节点的复选状态，并根据当前操作更新它们。这个过程可能需要递归调用，因为树可能包含任意深度的子节点。 总之，"jquery全选反选"涉及的核心知识点...
在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作、事件处理以及Ajax交互等任务。在涉及到表单元素如复选框（Checkbox）时，经常需要实现全选、反选和全不选的功能。下面将详细探讨 jQuery ...
### 二、jQuery反选 反选功能则是将当前已选中的项变为未选中，反之亦然。这个功能可以通过改变`checked`属性的值来实现。下面是一个反选的示例： ```html <!DOCTYPE html> <title>jQuery反选示例 ...
对于“全选”、“全不选”和“反选”功能，jQuery 提供了简洁的解决方案，同时也可以方便地获取选中的元素值。以下我们将详细探讨如何使用 jQuery 实现这些功能。 1. **全选**： 全选功能通常应用于具有多选选项的...
在本项目中，我们主要探讨如何使用jQuery来实现一个具有全选和商品增删功能的购物车。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互，使得创建交互性强的网页变得更为便捷。...
总结来说，"Jquery全选反选Checkbox"是一个提高用户体验的实用功能，通过jQuery的DOM操作和事件处理，我们可以轻松实现全选和反选的效果。而提供的压缩包资源则提供了具体的实现代码，便于开发者学习和使用。
总结起来，使用JavaScript和jQuery实现checkbox的全选、反选和全不选功能，主要涉及到对DOM元素的操作，特别是复选框的选中状态控制。通过事件监听和属性修改，我们可以轻松地实现这些交互效果，提升用户体验。在...
以上就是使用jQuery实现复选框全选和反选的基本步骤。在实际项目中，你可能还需要考虑一些边缘情况，例如当子复选框动态添加或删除时，全选状态的更新等。这个小示例提供了一个基础框架，开发者可以根据具体需求进行...
"jQuery全选"这个主题，就是关于如何使用jQuery实现表格或其他列表元素的全选和反选功能。下面，我们将深入探讨这一知识点，包括相关原理、代码实现以及实际应用。 一、jQuery全选的基本概念 在网页交互中，用户...
这个“基于jQuery实现的全选、反选复选框插件源码例子”是一个很好的学习资源，可以帮助开发者理解如何利用jQuery来操控DOM（Document Object Model）中的复选框，并实现全选与反选的功能。 首先，我们要了解jQuery...
ASelect.js是一款基于jQuery的插件，它专门针对下拉框进行了优化，增加了搜索、全选和反选等功能，极大地提升了用户体验。 一、ASelect.js功能特性 1. **搜索功能**：ASelect.js允许用户在下拉框中输入关键词进行...
本示例中，我们关注的是如何使用jQuery来实现复选框（checkbox）的全选和反选功能，这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中，复选框通常由`<input>`标签定义，类型为...
首先，我们来看一段用jQuery实现的全选和反选的基础代码示例。这段代码利用了jQuery的事件监听和属性操作功能来控制复选框的状态。当全选复选框被点击时，页面上所有具有相同name属性的复选框会被设置为选中或未选中...
全选和反选功能则是复选框常用的一种交互模式，极大地提升了用户体验，特别是当选项数量较大时。本文将深入探讨复选框的全选和反选机制及其在IT中的应用。 全选功能是指用户只需点击一个按钮或复选框，就能同时选中...