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 相关文章推荐
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
js命名空间写法示例
Dec 18 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 Javascript
BootStrap的两种模态框方式
May 10 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
原生js实现碰撞检测
Mar 12 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 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
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
Python 25行代码实现的RSA算法详解
2018/04/10 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
Django发送邮件功能实例详解
2019/09/02 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
如何通过python计算圆周率PI
2020/11/11 Python
Django数据统计功能count()的使用
2020/11/30 Python
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
日本航空官方网站:JAL
2019/06/19 全球购物
土木工程实习生自我鉴定
2013/09/19 职场文书
成人大专生实习期的自我评价
2013/10/02 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
记者节感言
2015/08/03 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书