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 相关文章推荐
jquery.validate使用攻略 第二部
Jul 01 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 Javascript
JS面向对象实现飞机大战
Aug 26 Javascript
vue-cli4.0多环境配置变量与模式详解
Dec 30 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
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
php设计模式 Visitor 访问者模式
2011/06/28 PHP
php缓冲 output_buffering的使用详解
2013/06/13 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
python判断windows隐藏文件的方法
2014/03/21 Python
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
python实现五子棋小程序
2019/06/18 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS