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的AJAX用法
May 10 Javascript
查看大图功能代码jquery版
Nov 05 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
js+html5操作sqlite数据库的方法
Feb 02 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 Javascript
vue数据初始化initState的实例详解
Apr 11 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 Javascript
layui弹出框Tab选项卡的示例代码
Sep 04 Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 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字符串截取中文截取2,单字节截取模式
2007/12/10 PHP
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
jQuery 表格插件整理
2010/04/27 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
Django小白教程之Django用户注册与登录
2016/04/22 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
python url 参数修改方法
2018/12/26 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
使用python接入微信聊天机器人
2020/03/31 Python
Python解析多帧dicom数据详解
2020/01/13 Python
python实现代码审查自动回复消息
2021/02/01 Python
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
商务英语专业自荐信
2013/10/14 职场文书
目标责任书范本
2014/04/16 职场文书
大队干部竞选演讲稿
2014/04/28 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL