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 相关文章推荐
用javascript获取地址栏参数
Dec 22 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 Javascript
JavaScript实现鼠标移入随机变换颜色
Nov 24 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 cli 小技巧
2013/06/03 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
php实现的日历程序
2015/06/18 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
Python字典,函数,全局变量代码解析
2017/12/18 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
python web基础之加载静态文件实例
2018/03/20 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
2014年政风行风自查自纠报告
2014/10/21 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
公司门卫岗位职责
2015/04/13 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
大学军训心得体会800字
2016/01/11 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
python中的3种定义类方法
2021/11/27 Python
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android
Python中npy和mat文件的保存与读取
2022/04/24 Python
MySQL数据库 任意ip连接方法
2022/05/20 MySQL