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方法添加回调函数一款插件的应用
Jan 21 Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
理解Javascript图片预加载
Feb 23 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 Javascript
微信小程序签到功能
Oct 31 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 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
1.PHP简介
2006/10/09 PHP
新闻分类录入、显示系统
2006/10/09 PHP
php下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
javascript 时间比较实现代码
2009/10/28 Javascript
juqery 学习之四 筛选过滤
2010/11/30 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
使用Python的内建模块collections的教程
2015/04/28 Python
Python字符串转换成浮点数函数分享
2015/07/24 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
考试退步检讨书
2014/01/15 职场文书
中专毕业生自我鉴定
2014/02/02 职场文书
圣诞节红领巾广播稿
2014/02/03 职场文书
2014年宣传工作总结
2014/11/18 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
长城导游词400字
2015/01/30 职场文书
教导主任个人总结
2015/03/03 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
导游词之无锡古运河
2019/11/14 职场文书