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 调试利器 Firebug使用详解六
Jul 05 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
Mar 24 Javascript
extjs3 combobox取value和text案例详解
Feb 06 Javascript
浅谈关于JavaScript的语言特性分析
Apr 11 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
详解js界面跳转与值传递
Nov 22 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
toString.call()通用的判断数据类型方法示例
Aug 28 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编码转换
2012/11/05 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
浅谈Javascript事件模拟
2012/06/27 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
Python栈算法的实现与简单应用示例
2017/11/01 Python
Python实现多线程的两种方式分析
2018/08/29 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
Linux中如何用命令创建目录
2016/12/02 面试题
干部现实表现材料
2014/02/13 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
第二课堂活动总结
2014/05/07 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
公司户外活动总结
2014/07/04 职场文书
室内趣味活动方案
2014/08/24 职场文书
团队会宣传标语
2014/10/09 职场文书
2014年收银工作总结
2014/11/13 职场文书
公证处委托书
2015/01/28 职场文书
青年教师听课心得体会
2016/01/15 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android