js实现(全选)多选按钮的方法【附实例】


Posted in Javascript onMarch 30, 2016

第一种,全部选中:

<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实现(全选)多选按钮的方法【附实例】

第二种,选中指定的。

以上这篇js实现(全选)多选按钮的方法【附实例】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
纯js分页代码(简洁实用)
Nov 05 Javascript
JQuery的$命名冲突详细解析
Dec 28 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
vue实现新闻展示页的步骤详解
Apr 11 Javascript
angular组件间通讯的实现方法示例
May 07 Javascript
JavaScript实现轮播图效果
Oct 30 Javascript
Vue组件生命周期运行原理解析
Nov 25 Vue.js
用JS生成UUID的方法实例
Mar 30 #Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 #Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 #Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 #Javascript
jquery实现一个简单的表单验证实例
Mar 30 #Javascript
js实现密码强度检测【附示例】
Mar 30 #Javascript
原生javascript实现的一个简单动画效果
Mar 30 #Javascript
You might like
javascript编程起步(第四课)
2007/02/27 Javascript
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
使用JavaScript进行表单校验功能
2017/08/01 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
Python函数嵌套实例
2014/09/23 Python
详解python的数字类型变量与其方法
2016/11/20 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
电脑教师的自我评价
2013/12/18 职场文书
主题酒店策划书
2014/01/28 职场文书
白莲教口号
2014/06/18 职场文书
管理工程专业求职信
2014/08/10 职场文书
教师工作总结范文2014
2014/11/10 职场文书
公司周年庆寄语
2019/06/21 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书