js全选按钮的实现方法


Posted in Javascript onNovember 17, 2015

本文实例讲述了js全选按钮的实现代码。分享给大家供大家参考。具体如下:
运行效果截图如下:

 js全选按钮的实现方法

具体代码如下

<html>
 <head>
   <title>复选框checked属性</title>
   <script language="JavaScript" type="text/javascript">
      function changeState(isChecked)
     {
       var chk_list=document.getElementsByTagName("input");
       for(var i=0;i<chk_list.length;i++)
        {
         if(chk_list[i].type=="checkbox")
          {
           chk_list[i].checked=isChecked;
          }
        }
    }
   </script>
 </head>
 <body>
   <h1>请选择你的爱好</h1>
   <form name="myForm1">
     <input type="checkbox" name="cb1" checked>看书<br>
     <input type="checkbox" name="cb2" checked>上网<br>
     <input type="checkbox" name="cb3">游戏<br>
   </form>
   <hr>
   <form name="myForm2">
     <input type="checkbox" name="cb" onclick="changeState(this.checked)">全选
   </form>
 </body>
</html>

以上就是js全选按钮的实现方法,希望对大家的学习有所帮助。

Javascript 相关文章推荐
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
小程序实现锚点滑动效果
Sep 23 Javascript
Vue中错误图片的处理的实现代码
Nov 07 Javascript
vue el-upload上传文件的示例代码
Dec 21 Vue.js
vue中 this.$set的使用详解
Nov 17 Vue.js
javascript实现省市区三级联动下拉框菜单
Nov 17 #Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 #Javascript
jquery表单验证需要做些什么
Nov 17 #Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 #Javascript
jquery验证手机号是否正确实例讲解
Nov 17 #Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 #Javascript
js弹出对话框方式小结
Nov 17 #Javascript
You might like
php gd等比例缩放压缩图片函数
2016/06/12 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
百度地图api如何使用
2015/08/03 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
JS中的==运算: [''] == false —&gt;true
2016/07/24 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
深入源码解析Python中的对象与类型
2015/12/11 Python
Python中的time模块与datetime模块用法总结
2016/06/30 Python
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
视觉直观感受若干常用排序算法
2017/04/13 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
python图像和办公文档处理总结
2019/05/28 Python
浅谈Pycharm最有必要改的几个默认设置项
2020/02/14 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
瑞士国际航空官网:SWISS
2016/07/21 全球购物
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
简述数据库的设计过程
2015/06/22 面试题
中间件分为哪几类
2016/09/18 面试题
毕业生简单求职信
2013/11/19 职场文书
自我鉴定书面格式
2014/01/13 职场文书
经典商业广告词
2014/03/13 职场文书
安全生产月活动总结
2014/05/04 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
Python3 如何开启自带http服务
2021/05/18 Python
React更新渲染原理深入分析
2022/12/24 Javascript