jquery操作checkbox示例分享


Posted in Javascript onJuly 21, 2014

checkbox操作

1. 全选、全不选

2.打印所有的选中项目

jquery操作checkbox示例分享

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title> </title>
 <script type="text/javascript" src="jquery-1.3.2.js"></script>
 <script>
 // 全选、全不选
 function docChkBoxChange(){
  var isChecked = jQuery('#docChkBoxTop').attr('checked');
  // 设置以下所有的 checkBox 列表
  jQuery("input[name=docChkBox]").each(function(){
  this.checked = isChecked;
  });
 }//end function
 // 打印所有的选中项目
 function printChoose(){
  var isChecked = jQuery('#docChkBoxTop').attr('checked');
  // 设置以下所有的 checkBox 列表
  jQuery("input[name=docChkBox]").each(function(){
  if(this.checked){
  alert(this.value)
  }
  });
 }//end function
 </script>
 </head>

 <body>
 <table>
 <tr>
 <td>
  <input id='docChkBoxTop' type="checkbox" onClick='docChkBoxChange()'>全选、全不选
 </td>
 </tr>
 <tr>
 <td>
  <input name='docChkBox' type="checkbox" value='apple'>苹果
 </td>
 </tr>
 <tr>
 <td>
  <input name='docChkBox' type="checkbox" value='banana'>香蕉
 </td>
 </tr>
 
 <tr>
 <td>
  <input type="button" value='打印所有选中项' onClick='printChoose()'>
 </td>
 </tr>
 </table>
 </body>
</html>
Javascript 相关文章推荐
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
点评js异步加载的4种方式
Dec 22 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
原生js实现放大镜
Feb 20 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
Vue.js中的组件系统
May 30 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
JavaScript使用表单元素验证表单的示例代码
Aug 20 Javascript
VUE路由动态加载实例代码讲解
Aug 26 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
jquery常用操作小结
Jul 21 #Javascript
JavaScript中的apply和call函数详解
Jul 20 #Javascript
一行命令搞定node.js 版本升级
Jul 20 #Javascript
JavaScript中的原型和继承详解(图文)
Jul 18 #Javascript
JavaScript中伪协议 javascript:使用探讨
Jul 18 #Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 #Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 #Javascript
You might like
FCKeditor的安装(PHP)
2007/01/13 PHP
深入了解PHP类Class的概念
2012/06/14 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
JavaScript Math 对象常用方法总结
2016/04/28 Javascript
深入理解js中this的用法
2016/05/28 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
微信小程序将字符串生成二维码图片的操作方法
2018/07/17 Javascript
webpack多入口多出口的实现方法
2018/08/17 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
中国宠物用品商城:E宠商城
2016/08/27 全球购物
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
Bulk Powders意大利:运动补充在线商店
2019/02/09 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
执行力心得体会
2013/12/31 职场文书
出纳员岗位职责
2014/03/13 职场文书
小区文明倡议书
2014/05/16 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书