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 相关文章推荐
jQuery 源码分析笔记(2) 变量列表
May 28 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
JQuery中使文本框获得焦点的方法实例分析
Feb 28 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
angular ng-model 无法获取值的处理方法
Oct 02 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 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 google或baidu分页代码
2009/11/26 PHP
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
jQuery版Tab标签切换
2011/03/16 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
jquery等待效果示例
2014/05/01 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
Vue实现简单的留言板
2020/10/23 Javascript
Python 模拟登陆的两种实现方法
2017/08/10 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
python连接mysql有哪些方法
2020/06/24 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
毕业生自我鉴定
2013/12/04 职场文书
年级组长自我鉴定
2014/02/22 职场文书
公司停电通知
2015/04/15 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
班级管理经验交流材料
2015/11/02 职场文书