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 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
js 采用delete实现继承示例代码
May 20 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
May 24 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
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
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
设置php页面编码的两种方法示例介绍
2014/03/03 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
Vue左滑组件slider使用详解
2020/08/21 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
Python接口开发实现步骤详解
2020/04/26 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
如何写一个自定义标签
2012/12/28 面试题
PHP引擎php.ini参数优化深入讲解
2021/03/24 PHP
工程管理英文求职信
2014/03/18 职场文书
大学新生入学教育方案
2014/05/16 职场文书
党员干部一句话承诺
2014/05/30 职场文书
安全标兵事迹材料
2014/08/17 职场文书
法人代表证明书
2014/09/18 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
六年级语文教学反思
2016/03/03 职场文书