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 动态添加表格行
Jun 22 Javascript
js打印纸函数代码(递归)
Jun 18 Javascript
jquery 检测元素是否存在的实例代码
Nov 19 Javascript
Jquery跳到页面指定位置的方法
May 12 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
canvas实现图像放大镜
Feb 06 Javascript
js如何找出字符串中的最长回文串
Jun 04 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
JavaScript实现简单计算器功能
Dec 19 Javascript
Vue Router的手写实现方法实现
Mar 02 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 取得瑞年与平年的天数的代码
2009/08/10 PHP
PHP 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
javascript event 事件解析
2011/01/31 Javascript
jquery鼠标停止移动事件
2013/12/21 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
vue综合组件间的通信详解
2017/11/06 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
python实现翻转棋游戏(othello)
2019/07/29 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
Python-numpy实现灰度图像的分块和合并方式
2020/01/09 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
Python常用类型转换实现代码实例
2020/07/28 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
计算机毕业大学生推荐信
2013/12/01 职场文书
高中地理教学反思
2014/01/29 职场文书
会计专业毕业自荐书范文
2014/02/08 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle
Golang并发工具Singleflight
2022/05/06 Golang