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使用指南之selector.js
Jan 10 Javascript
33种Javascript 表格排序控件收集
Dec 03 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
JS格式化数字保留两位小数点示例代码
Oct 15 Javascript
JavaScript中return false的用法
Mar 12 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
Javascript实现图片不间断滚动的代码
Jun 22 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
简单实现vue验证码60秒倒计时功能
Oct 11 Javascript
JS中的函数与对象的创建方式
May 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实例
2013/12/24 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
HTML5 canvas 9绘制图片实例详解
2016/09/06 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
jQuery上传插件webupload使用方法
2017/08/01 jQuery
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
Windows下python3.7安装教程
2018/07/31 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
python剪切视频与合并视频的实现
2020/03/03 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
面试求职的个人自我评价
2013/11/16 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
党委班子剖析材料
2014/08/21 职场文书
工厂见习报告范文
2014/10/31 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs
Python如何加载模型并查看网络
2022/07/15 Python