JavaScript第一篇之实现按钮全选、功能


Posted in Javascript onAugust 21, 2016

   1、新建一个文档(用NotePad软件,为了使得在浏览器中打开不是乱码,在软件的文件出找到编码,将其修改为UTF-8编码。或者点击谷歌浏览器中的右上角的三条杠,选择更多工具->编码->UTF-8),将其重命名(例:第一个java script.html   注:一定要把扩展名改为.html)。

   2、将其用记事本的格式打开,进行编写。

   3、以下是编写的“按钮全选的实现”的相关代码:

<html>
<head>
<title> 全选按钮的实现 </title>
</head>
<body>
<div>
<input type="checkbox" id="chkAll" onclick="checkAll(this)" />全选
</div>
<div>
<input type="checkbox" name="chk"/>选项1
</div>
<div>
<input type="checkbox" name="chk"/>选项2
</div>
<div>
<input type="checkbox" name="chk"/>选项3
</div>
<div>
<input type="checkbox" name="chk"/>选项4
</div>
<input type="checkbox" name="chk"/>选项5
</div>
</body>
<script>
//全选
function checkAll(e)
{
var t=document.getElementsByName("chk");
alert(t.length);
for(var i=0;i<t.length;i++)
{
t[i].checked=document.getElementById("chkAll").checked;
}
}
</script>
</html>

  4、截图为:

JavaScript第一篇之实现按钮全选、功能

Javascript 相关文章推荐
javascript 获取网页参数系统
Jul 19 Javascript
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
AngularJS自定义控件实例详解
Dec 13 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
JS实现图片局部放大或缩小的方法
Aug 20 #Javascript
JS获取及验证开始结束日期的方法
Aug 20 #Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 #Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 #Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 #Javascript
JS实现漂亮的时间选择框效果
Aug 20 #Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 #Javascript
You might like
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
laravel自定义分页效果
2017/07/23 PHP
js页面跳转常用的几种方式
2010/11/25 Javascript
jQuery遍历Table应用示例
2014/04/09 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
Python深入学习之上下文管理器
2014/08/31 Python
Python中方法链的使用方法
2016/02/23 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
python datetime中strptime用法详解
2019/08/29 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
python中count函数简单用法
2020/01/05 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
行政人员岗位职责
2013/12/08 职场文书
市场营销专业个人求职信范文
2013/12/14 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
股权转让协议范本
2014/12/07 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技