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 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
jquery Mobile入门—多页面切换示例学习
Jan 08 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
浅析JS运动
Dec 28 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
Oct 08 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
Vue中对比scoped css和css module的区别
May 17 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
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
Python get获取页面cookie代码实例
2018/09/12 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
python获取Linux发行版名称
2019/08/30 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
大学班长的职责
2014/01/27 职场文书
大学生军训感想
2014/02/16 职场文书
请假条的格式
2014/04/11 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python