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 相关文章推荐
表单元素事件 (Form Element Events)
Jul 17 Javascript
JQuery下关于$.Ready()的分析
Dec 13 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
canvas的神奇用法
Feb 03 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 Javascript
微信小程序实现侧边栏分类
Oct 21 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 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
Protoss魔法科技
2020/03/14 星际争霸
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
邮箱正则表达式实现代码(针对php)
2013/06/21 PHP
php5.5中类级别的常量使用介绍
2013/10/02 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
PHP实现倒计时功能
2020/11/16 PHP
js 解决“options为空或不是对象”
2008/12/22 Javascript
走出JavaScript初学困境—js初学
2008/12/29 Javascript
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
Python程序员开发中常犯的10个错误
2014/07/07 Python
解决python升级引起的pip执行错误的问题
2018/06/12 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
Python FFT合成波形的实例
2019/12/04 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
岗位说明书范文
2014/05/07 职场文书
创先争优活动承诺书
2014/08/30 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
MySQL之select、distinct、limit的使用
2021/11/11 MySQL