jquery与js实现全选功能的区别---2017-05-12
一、jquery常用的事件
click(),dbclick()
focus(),blur()
change()
keydown(),keypress(),keyup()
mousedown(),mouseup() mouseenter(),mouseleave() mouseover(),mouseout() mousemove()
二、jquery挂事件
$(“p”).bind("事件名称”,要执行的匿名函数)
$(“p”).unbind("事件名称”)
三、jquery实现全选功能(重点是属性用.prop(),不用.attr())
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="{utf-8}">
<title></title>
<script src="../jquery-3.2.0.js"></script>
</head>
<body>
<form>
<input type="checkbox" class="all"/>省市<br />
<input type="checkbox" class="a"/>山东
<input type="checkbox" class="a"/>山西
<input type="checkbox" class="a"/>北京
<input type="checkbox" class="a"/>河北
<input type="checkbox" class="a"/>江苏
</form>
</body>
</html>
<script>
$(".all").click(function(){
// alert($(this)[0].checked);//如果选中则返回true;否则返回false
var a= $(this)[0].checked; //dom对象 // alert($(this).prop("checked"));
var a=$(this).prop("checked");//获取jquery对象 //改变子复选框的状态 用prop代替attr,解决了之前用js写出现的bug,但是在源代码中查不到
$(".a").prop("checked",a); })
</script>
对比js全选代码:{2017-05-03日的详情见数据访问(租房子多条件查询)}
function quanxuan(a,ff)
{
var ck = document.getElementsByClassName(ff);
if(a.checked)
{
for(var i=0;i<ck.length;i++)
{
ck[i].setAttribute("checked","checked");
}
}
else
{
for(var i=0;i<ck.length;i++)
{
ck[i].removeAttribute("checked");
}
}
}
</script>
此外,jquery可以替代js的一切功能,除了settimeout,setinterval
jquery与js实现全选功能的区别---2017-05-12的更多相关文章
- JS实现全选功能
000. 开始 学习JS有一段时间了,最近看了一些JS练手的小demo实例,自己也尝试着用JS进行实现. 全选功能是在很多注册页面.获取用户兴趣爱好.让用户勾选一些选项等页面中常见的一种效果,主要有全 ...
- JQUERY的给Check全选功能
//给Checkbox提供全选功能 $("#checkall").click(function(){ if(this.checked){ $("input[name='c ...
- 使用js实现全选功能。(全选,全不选,反选)
作业210721 提交代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- JS全选功能代码优化
原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...
- js初学—实现checkbox全选功能
布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id=& ...
- jquery实现全选功能
主要是模拟一些网页中的表格实现全选功能. <form> 你爱好的运动是: <input type="checkbox" id="Check" ...
- 问题1:jquery实现全选功能,第二次失效(已解决)
问题:使用了attr("checked",true”)设置子复选框的被选状态,第一次执行功能正常,但第二次失效. 解决方案:将attr("checked",tr ...
- S全选功能代码
JS全选功能代码优化 2014-06-26 00:00 by 龙恩0707, 470 阅读, 3 评论, 收藏, 编辑 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写 ...
- EasyUI datagrid 复选框可以多选但不能全选功能实现
1.功能需求: 实现多选,但是不能够全选功能 2.js代码 //帮卖列表页面,可以多选但是不能够全选实现 $(".datagrid-header-check").children ...
随机推荐
- JAVA源码剖析(容器篇)HashMap解析(JDK7)
Map集合: HashMap底层结构示意图: HashMap是一个“链表散列”,其底层是一个数组,数组里面的每一项都是一条单链表. 数组和链表中每一项存的都是一“Entry对象”,该对象内部拥有key ...
- iOS开发之Autolayout
1.概述 在以前的iOS程序中,是如何设置布局UI界面的? (1)经常编写大量的坐标计算代码 (2)为了保证在3.5 inch和4.0 inch屏幕上都能有完美的UI界面效果,有时还需要分别为2种屏幕 ...
- mysql技术内幕InnoDB存储引擎-阅读笔记
mysql技术内幕InnoDB存储引擎这本书断断续续看了近10天左右,应该说作者有比较丰富的开发水平,在源码级别上分析的比较透彻.如果结合高可用mysql和高性能mysql来看或许效果会更好,可惜书太 ...
- vs2012 asp调试设置 清单目录
在web.cong中添加 <system.webServer> <directoryBrowse enabled="true" /> </system ...
- 一个关于Linux升级Python后yum的小问题
前几天在自己的阿里云服务器安装好Python3.5.2之后,顺便删除了原有的/usr/bin/python(因为我知道系统自带的是Python2,而且也会有/usr/bin/python2这个文件,所 ...
- javaWEB与JSP指令
JSP三大指令 一个jsp页面中,可以有0~N个指令的定义!1. page --> 最复杂:<%@page language="java" info="xx ...
- [SinGuLaRiTy] 2017-03-30 综合性测试
[SinGuLaRiTy-1014] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 对于所有的题目:Time Limit:1s | Me ...
- [SinGuLaRiTy] ZKW线段树
[SinGuLaRiTy-1007] Copyrights (c) SinGuLaRiTy 2017. All Rights Reserved. 关于ZKW线段树 Zkw线段树是清华大学张昆玮发明非递 ...
- Framework7+vue demo
最近看了下f7+vue做了几个测试页面,商品图片来自淘宝,代码等有时间了再传,
- smartgit试用到期不用序列号怎么继续使用
方法1 1:进入C盘,搜索SmartGit,出现\AppData\Roaming\syntevo: 2:进入文件7.1和8,这个有不同的版本可以使用,上次里面的setting.xml文件 3:重新打开 ...