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 相关文章推荐
MSN消息提示类
Sep 05 Javascript
treepanel动态加载数据实现代码
Dec 15 Javascript
javascript闭包的理解
Apr 01 Javascript
简单理解vue中Props属性
Oct 27 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
webpack file-loader和url-loader的区别
Jan 15 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
Jul 11 Javascript
Vue和React有哪些区别
Sep 12 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字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
Python实现学生成绩管理系统
2020/04/05 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
柯基袜:Corgi Socks
2017/01/26 全球购物
eBay德国站:eBay.de
2017/09/14 全球购物
创联软件面试题笔试题
2012/10/07 面试题
求职简历的自我评价怎样写好
2013/10/07 职场文书
银行实习的自我鉴定
2013/12/10 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python
cypress测试本地web应用
2022/06/01 Javascript