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 相关文章推荐
自己编写的类似JS的trim方法
Oct 09 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 Javascript
js实现的订阅发布者模式简单示例
Mar 14 Javascript
Vue+Flask实现图片传输功能
Apr 01 Vue.js
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用mysql数据库存储session的代码
2010/03/05 PHP
php中用foreach来操作数组的代码
2011/07/17 PHP
PHP中extract()函数的定义和用法
2012/08/17 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
Node.js异步I/O学习笔记
2014/11/04 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
Servlet的生命周期
2013/08/25 面试题
高中毕业生的个人自我评价
2014/02/21 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
离婚协议书范本
2015/01/26 职场文书
小学教师见习总结
2015/06/23 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫