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 相关文章推荐
ExtJS 2.0 GridPanel基本表格简明教程
May 25 Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
JS函数节流和函数防抖问题分析
Dec 18 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 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
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
PHP 柱状图实现代码
2009/12/04 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
PHP7 新增功能
2021/03/09 PHP
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
微信小程序页面生命周期详解
2018/01/31 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
Python中的choice()方法使用详解
2015/05/15 Python
python数据结构之链表的实例讲解
2017/07/25 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
pytorch实现线性拟合方式
2020/01/15 Python
python代码实现猜拳小游戏
2020/11/30 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
函授本科自我鉴定
2013/11/03 职场文书
秘书英文求职信
2014/04/16 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android