使用jQuery实现全选，全不选和反选的效果

使用jQuery实现全选，全不选和反选的效果

 

上一篇我们用的是JavaScript的方法实现这个效果，接下来让我们用jQ

uery的方法来实现一下。

首先第一步像上一篇一样，我们来写一下它的布局，现在我用的是radio，他是一个单选框，如果给这几个input标签一个name属性且相同的话，他就只能选择一个，否则它可以选多个，在这里我们不需要name属性，我们现在不用button按钮而用input标签，其实他们的效果都一样，我们只需把input里的type属性改成button就可以了如下：

<input type="button" id="btn1" name="name" value=" 全选" />

<input type="button" id="btn2" name="name" value=" 全不选" />

  <input type="button" id="btn3" name="name" value="两极反转 " />

我们先给这三个input标签一个id为btn1，btn2，btn3，name属性要不要无所谓，再分别给这三个input标签的value属性一个值分别为全选，全不选和两极反转，这样就可以把input标签撑开，样式咱先不写，就简单的看一下效果，那我们就开始进入jQuery部分的讲解。

1. 首先我们先引入jQuery插件再在<script></script>里面写一个简写的页面加载事件  $(function () {})，再把我们要写的方法写在这个页面加载事件里边。
2. var input = $("input[type=radio]");先声明一个变量input获取一下含有radio值的所有input标签，现在我们获取的input是一个集合所以我们要遍历一下所有的input标签，在JavaScript中我们是先遍历所有的input标签再写点击事件，可是在jQuery中却是先写点击事件再遍历，所以我们先给这三个button按钮绑定点击事件所以我们要先获取一下每一个button按钮，在jQuery中获取元素有很多种，它获取的方式和我们在css中获取元素差不多，只是我们要在它外边套上一件外套$(“”)就是这个，这样我们就获取了第一个按钮方法如下：

$("#btn1").click(function () {});

$("#btn2").click(function () {});

$("#btn3").click(function () {});

这样就比在JavaScript中获取的简便。

1. 现在我们就要开始遍历所有的input标签了，在JavaScript里面我们使用for循环来遍历，而在我们jQuery里面也有一种类似for循环的一种方法就是each，each的概括是：通用例遍方法，可用于例遍对象和数组。不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。$.each(object,[callback])，我们可以看出each方法里有几个参数，第一个object是指需要例遍的对象或数组。第二个callback是指每个成员/元素执行的回调函数，$.each(input, function (index, value) {})，所有第一个我们放的是input变量，第二个就是所要执行的回调函数，而回调函数中又有两个参数，分别是index和value，index表示索引值，value表示input标签里的值。
2. 我们现在就只要到each里面写我们要执行的代码了，第一个btn1中写input[index].checked = true;这句代码的意思是让所有的input标签的checked为true就是都被选中，第二个btn2中写input[index].checked = false; 这句代码的意思是让所有的input标签的checked为false就是都不被选中，第三个btn3中写input[index].checked = input[index].checked == true ? false : true; 这句代码的意思是判断一下所有的input标签的checked是否为true，如果是就让它为false，反之为true。这样我们用jQuery的方法就完成了我们想要的效果。

全选的效果如下：

全不选的效果如下：

两极反转的效果如下：