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 常用函数库详解
Oct 21 Javascript
js中匿名函数的N种写法
Sep 08 Javascript
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
May 22 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 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 session 预定义数组
2009/03/16 PHP
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
php加密解密字符串示例
2016/10/13 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
js取模(求余数)隔行变色
2014/05/15 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
python回调函数用法实例分析
2015/05/09 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
如何在python中实现随机选择
2019/11/02 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
高中政治教学反思
2014/01/18 职场文书
日语系毕业求职信
2014/07/27 职场文书
作风建设年度心得体会
2014/10/29 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
Android实现图片九宫格
2022/06/28 Java/Android