jqeury实现全选和反选
注意:对于input获取属性不能用attr(),只能用prop()。不然出现undefined。
第一版:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选、全不选、反选</title>
</head>
<body>
<label><input type="checkbox" name="" id="">衣服</label>
<label><input type="checkbox" name="" id="">鞋子</label>
<label><input type="checkbox" name="" id="">裤子</label>
<label><input type="checkbox" name="" id="">内衣</label>
<input id="btn1" type="button" value="全选">
<input id="btn2" type="button" value="反选">
<script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$('#btn1').click(function(event) {
//先保存这些checkbox的这个属性的值,取反。
var check = $(":checkbox").prop('checked');
$(":checkbox").prop('checked',!check);
}); $('#btn2').click(function(event) {
$(":checkbox").each(function(index) {
//遍历每一个checkbox,针对当前的这个取反。
var check = $(this).prop('checked');
$(this).prop('checked',!check);
});
});
</script>
</body>
</html>
第二版:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选、全不选、反选</title>
</head>
<body>
<label><input type="checkbox" name="" id="">衣服</label>
<label><input type="checkbox" name="" id="">鞋子</label>
<label><input type="checkbox" name="" id="">裤子</label>
<label><input type="checkbox" name="" id="">内衣</label>
<input id="btn1" type="button" value="全选">
<input id="btn2" type="button" value="反选">
<script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$('#btn1').click(function(event) {
if($(":checkbox").prop('checked')){
$(":checkbox").prop('checked',false);
$(this).attr('value','全选');
}else{
$(":checkbox").prop('checked',true);
$(this).attr('value','全不选');
}
}); $('#btn2').click(function(event) {
$(":checkbox").each(function(index) {
var check = $(this).prop('checked');
console.log(check);
$(this).prop('checked',!check);
});
});
</script>
</body>
</html>
在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。
关于它们两个的区别,网上的答案很多。这里谈谈我的心得,我的心得很简单:
- 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
- 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
上面的描述也许有点模糊,举几个例子就知道了。
<a href="http://www.baidu.com" target="_self" class="btn">百度</a>
这个例子里<a>元素的DOM属性有“href、target和class",这些属性就是<a>元素本身就带有的属性,也是W3C标准里就包含有这几个属性,或者说在IDE里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用prop方法。
<a href="#" id="link1" action="delete">删除</a>
这个例子里<a>元素的DOM属性有“href、id和action”,很明显,前两个是固有属性,而后面一个“action”属性是我们自己自定义上去的,<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时,建议使用attr方法。使用prop方法取值和设置属性值时,都会返回undefined值。
再举一个例子:
<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见
像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此需要使用prop方法去操作才能获得正确的结果。
$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true
如果上面使用attr方法,则会出现:
$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"
jqeury实现全选和反选的更多相关文章
- checkbox的全选与反选
最近在做一个项目,其中一个功能就是多选框的全选与反选.感觉很简单的小功能,一下子想不起来怎么实现了,很是耽误时间.我在想,我有必要整理下自己的一些小demo了,也方便以后再使用的时候能快速的完成功能. ...
- jQuery checkbox的全选与反选
1:checkbox的全选与反选 js 代码 $("#cbAll").click(function(){ if($("#cbAll").is(":ch ...
- 夺命雷公狗-----React---28--小案例之react经典案例todos(全选和反选)完
这个功能实现的步骤如下所示: 最终实现全选和反选,代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...
- PHP基础班初学心得:用JQ实现表单的全选、反选、取消和删除功能
摘要: 本人刚参加PHP基础班培训,由于之前毫无基础,分享的心得可能不规范,方法也许也"旁门左道",不能保证质量,只作自己总结学习,也希望能帮助到同样是初学者的朋友们,共同进步. ...
- ichecked 全选、反选
//iChecked复选框的全选.反选var checkBox =function (checkParents){ $(checkParents).find('.minimalCheckBox1'). ...
- checkbox全选,反选,取消选择 jquery
checkbox全选,反选,取消选择 jquery. //checkbox全部选择 $(":checkbox[name='osfipin']").each(function(){ ...
- 【jquery】一个简单的单选、多选、全选、反选、删除的小功能
对表格内容进行单行删除.单行选中.多行选中.全选.反选.删除选中行等操作 HTML代码 <table class="table table-bordered border-shadow ...
- checkbox全选与反选
用原生js跟jquery实现checkbox全选反选的一个例子 原生js: <!DOCTYPE html> <html lang="en"> <hea ...
- jquery一个按钮全选和反选
1.jquery实现复选框全选和反选的方式有好几种,今天遇到一个问题,只用下边的方式生效:function checkAll(){ var check=$('#check_all').is(':che ...
随机推荐
- OpenGL几何变换---翻译http://www.songho.ca/opengl/gl_projectionmatrix.html
Overview 几何数据——顶点位置,和法向量(normal vectors),在OpenGL 管道raterization 处理过程之前可通过顶点运算(Vertex Operation)和基本组合 ...
- RQNOJ 169 最小乘车费用:水dp
题目链接:https://www.rqnoj.cn/problem/169 题意: 给出行驶1-10公里的费用(所有车一样),可以倒车,问行驶n公里的最小费用. 题解: 大水题... (=´ω`=) ...
- html5--1.11列表
html5--1.11列表 学习要点: 无序列表 有序列表 列表的属性 自定义列表 1.无序列表的基本格式 ul(unorder line)标签里面放li标签就好了,每一项就是一个li(LineIte ...
- the art of seo(chapter eleven)
Tracking Results and Measuring Success goal -> driver ***Why Measuring Success Is Essential to th ...
- 第十四章-MySQL
1 安装 MySQL常见的版本 GA: 广泛使用的版本 RC: 最接近正式版本 Alpha和Bean: 内测版本和公测版本 有两种安装方式: 安装包和压缩包 1) 安装msi文件 2) 解压zip文件 ...
- ActivityMq的使用(小例子)
一.ActivityMq的介绍: 1.什么是消息中间件?与传统的传输通讯有什么区别? 异步,无需等待,消息存放在队列里面. 2.为什么要使用消息中间件? 消息中间件可以解决高并发. 两种通讯方式:01 ...
- AtCoder Grand Contest #026 B - rng_10s
Time Limit: 2 sec / Memory Limit: 1024 MB Score : 600600 points Problem Statement Ringo Mart, a conv ...
- hdu畅通工程
传送门 畅通工程 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Su ...
- 第十二章: 部署Django
本章包含创建一个django程序最必不可少的步骤 在服务器上部署它 如果你一直跟着我们的例子做,你可能正在用runserver 但是runserver 要部署你的django程序,你需要挂接到工业用的 ...
- setsockopt函数功能及参数详解
Socket描述符选项[SOL_SOCKET] #include <sys/socket.h> int setsockopt( int socket, int level, int opt ...