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 加上最后自己的验证
Nov 04 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
Mar 01 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
vue生命周期实例小结
Aug 15 Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 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中的多态性[译]
2011/08/02 PHP
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
jQuery中库的引用方法
2018/01/06 jQuery
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
深入源码解析Python中的对象与类型
2015/12/11 Python
使用Python对Access读写操作
2017/03/30 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
python unichr函数知识点总结
2020/12/16 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
委托公证书格式
2015/01/26 职场文书
关于颐和园的导游词
2015/01/30 职场文书
档案工作个人总结
2015/03/03 职场文书
宪法宣传标语100条
2019/10/15 职场文书