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 相关文章推荐
在网页中屏蔽快捷键
Sep 06 Javascript
struts2 jquery 打造无限层次的树
Oct 23 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
JS.getTextContent(element,preformatted)使用介绍
Sep 21 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
Bootstrap的图片轮播示例代码
Aug 31 Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
Jul 24 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
JS封装cavans多种滤镜组件
Feb 15 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邮件专题
2006/10/09 PHP
为查询结果建立向后/向前按钮
2006/10/09 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
Python实现的简单万年历例子分享
2014/04/25 Python
Python中的闭包总结
2014/09/18 Python
Python入门教程之运算符与控制流
2016/08/17 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
python中join()方法介绍
2018/10/11 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
python学生信息管理系统实现代码
2019/12/17 Python
opencv python图像梯度实例详解
2020/02/04 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
机械工程系毕业生求职信
2013/09/27 职场文书
计算机专业毕业生的自我评价
2013/11/18 职场文书
《她是我的朋友》教学反思
2014/04/26 职场文书
社区服务活动总结
2014/05/07 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python