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 相关文章推荐
可以文本显示的公告栏的js代码
Mar 11 Javascript
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
非阻塞动态加载javascript广告实现代码
Nov 17 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
BackBone及其实例探究_动力节点Java学院整理
Jul 14 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 Javascript
原生JS中应该禁止出现的写法
May 05 Javascript
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
桌面中心(二)数据库写入
2006/10/09 PHP
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
JScript的条件编译
2007/05/29 Javascript
juqery 学习之四 筛选过滤
2010/11/30 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
js中日期的加减法
2015/05/06 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
js格式化时间的方法
2015/12/18 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
Python configparser模块操作代码实例
2020/06/08 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
高中生职业规划范文
2014/03/09 职场文书
村长贪污检举信
2014/04/04 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript