首页手记 jquery全选/取消全选(反选)/单选操作

jquery全选/取消全选(反选)/单选操作

标签：

JQuery

使用jQuery实现一组checkbox全选/取消全选，代码很简洁.

jquery版本：2.0

先看看HTML代码，很简单的操作框

</head><body>   <div>       <input id="checkAll" type="checkbox" />全选       <input name="subBox" type="checkbox" />项1       <input name="subBox" type="checkbox" />项2       <input name="subBox" type="checkbox" />项3       <input name="subBox" type="checkbox" />项4   </div></body></html>

引入jquery库

<scriptclass="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/static/js/jquery-2.0.3.min.js"></script>

对于checkbox的选择，实际上就是添加了一个属性：checked，不管value有没有值，都是选中状态，在程序里面，如果checked值选中，就是true，不存在就是false。

<scripttype="text/javascript">$(function() {  $("#checkAll").click(function() {                   $('input[name="subBox "]'). attr ("checked",this.checked);         });         var$sub = $("input[name=' subBox ']");         $sub.click(function(){                   $("#checkAll").attr("checked",$sub.length==$("input[name='subBox']:checked").length ? true : false);         });});</script>

这段代码在第一次正常可以全选和全不选，但是后面就没有效果，因为$('input[name=" subBox "]'). attr ("checked",this.checked)的值是undefined，因为在源代码里面没有这个属性。

查看jquery的api手册，发现了一个prop函数：

—————————-以下函数说明应用自jquery官方api———————————-

prop(name|properties|key,value|fn)

概述

获取在匹配的元素集中的第一个元素的属性值。

随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误

参数

name

属性名称

properties

作为属性的“名/值对”对象

key,value

属性名称，属性值

key,function(index, attr)

1:属性名称。

2:返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。

——————————————以上函数说明应用自jquery官方api————————————–

prop()获取匹配的元素的属性值。

这个方法是jquery1.6以后出来的，用来区别之前的.attr()方法.

区别最大的一点就是：布尔型的属性，1.6以后都是用.prop()方法就好了。

这个布尔型的属性，再解释一下，是属性值只有true|false的属性。

还有种情况就是只添加属性名，不需要写属性值的就可以生效的也同样使用.prop()方法。比如：checked、disable这样的，其实它们说到底还是属于布尔型的属性。

1.添加属性名称该属性就会生效应该使用prop();

2.是有true,false两个属性使用prop();

3.其他则使用attr();

上面的代码将attr替换为prop：

<scripttype="text/javascript">$(function() {  $("#checkAll").click(function() {                   $('input[name="subBox "]').prop("checked",this.checked);         });         var$sub = $("input[name=' subBox ']");         $sub.click(function(){                   $("#checkAll").prop("checked",$sub.length== $("input[name=' subBox ']:checked").length ? true : false);         });});</script>

这样修改以后，就正常了

点击查看更多内容