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 相关文章推荐
javascript fullscreen全屏实现代码
Apr 09 Javascript
Package.js  现代化的JavaScript项目make工具
May 23 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
javascript常用对话框小集
Sep 13 Javascript
jquery遍历checkbox介绍
Feb 21 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 Javascript
javascript实现前端成语点击验证
Jun 24 Javascript
用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
PHP 第二节 数据类型之数值型
2012/04/28 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
php将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
csdn 批量接受好友邀请
2009/02/19 Javascript
jQuery中调用WebService方法小结
2011/03/28 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
2014/12/31 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
Python标准库内置函数complex介绍
2014/11/25 Python
python安装以及IDE的配置教程
2015/04/29 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
中国旅游网站:同程旅游
2016/09/11 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
绩效工资分配方案
2014/01/18 职场文书
个人综合鉴定材料
2014/05/23 职场文书
高三化学教学反思
2016/02/22 职场文书