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 相关文章推荐
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 Javascript
微信小程序 购物车简单实例
Oct 24 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
微信小程序 网络API发起请求详解
Nov 09 Javascript
js实现导航栏中英文切换效果
Jan 16 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 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脚本的10个技巧(8)
2006/10/09 PHP
ZF等常用php框架中存在的问题
2008/01/10 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
PHP实现的日历功能示例
2018/09/01 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
JavaScript 字符编码规则
2009/05/04 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
js字符串完全替换函数分享
2014/12/03 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
python实现多线程端口扫描
2019/08/31 Python
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
劳动工资科岗位职责范本
2014/03/02 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
师德师风个人自我剖析材料
2014/09/27 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
在职证明范本
2015/06/15 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python
Mysql中常用的join连接方式
2022/05/11 MySQL