JQuery对checkbox操作 (循环获取)


Posted in Javascript onMay 20, 2011
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DemoCheckBox.aspx.cs" Inherits="DemoCheckBox" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>无标题页</title> 
<script src="js/jquery-1.6.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
jQuery(function($){ 
//全选 
$("#btn1").click(function(){ 
$("input[name='checkbox']").attr("checked","true"); 
}) 
//取消全选 
$("#btn2").click(function(){ 
$("input[name='checkbox']").removeAttr("checked"); 
}) 
//选中所有基数 
$("#btn3").click(function(){ 
$("input[name='checkbox']:even").attr("checked","true"); 
}) 
//选中所有偶数 
$("#btn6").click(function(){ 
$("input[name='checkbox']:odd").attr("checked","true"); 
}) 
//反选 
$("#btn4").click(function(){ 
$("input[name='checkbox']").each(function(){ 
if($(this).attr("checked")) 
{ 
$(this).removeAttr("checked"); 
} 
else 
{ 
$(this).attr("checked","true"); 
} 
}) 
}) 
//或许选择项的值 
var aa=""; 
$("#btn5").click(function(){ 
$("input[name='checkbox']:checkbox:checked").each(function(){ 
aa+=$(this).val() 
}) 
document.write(aa); 
}) 
}) 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<input type="button" id="btn1" value="全选"> 
<input type="button" id="btn2" value="取消全选"> 
<input type="button" id="btn3" value="选中所有奇数"> 
<input type="button" id="btn6" value="选中所有偶数"> 
<input type="button" id="btn4" value="反选"> 
<input type="button" id="btn5" value="获得选中的所有值"> 
<br> 
<input type="checkbox" name="checkbox" value="checkbox1"> 
checkbox1 
<input type="checkbox" name="checkbox" value="checkbox2"> 
checkbox2 
<input type="checkbox" name="checkbox" value="checkbox3"> 
checkbox3 
<input type="checkbox" name="checkbox" value="checkbox4"> 
checkbox4 
<input type="checkbox" name="checkbox" value="checkbox5"> 
checkbox5 
<input type="checkbox" name="checkbox" value="checkbox6"> 
checkbox6 
<input type="checkbox" name="checkbox" value="checkbox7"> 
checkbox7 
<input type="checkbox" name="checkbox" value="checkbox8"> 
checkbox8 
</div> 
</form> 
</body> 
</html>

jquery 循环读取checkbox值
$("input[type=checkbox][checked]").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出 
alert($(this).val()); 
});
Javascript 相关文章推荐
基于jQuery替换table中的内容并显示进度条的代码
Aug 02 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
Dec 06 Javascript
Jquery-data的三种用法
Apr 18 jQuery
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
JQuery的加载和选择器用法简单示例
May 13 jQuery
Webpack 4如何动态切割JS注入文件名详解
Jul 09 Javascript
vue 弹出遮罩层样式实例
Jul 22 Javascript
检测jQuery.js是否已加载的判断代码
May 20 #Javascript
JQuery datepicker 使用方法
May 20 #Javascript
Jquery中Ajax 缓存带来的影响的解决方法
May 19 #Javascript
jQuery对表单元素的取值和赋值操作代码
May 19 #Javascript
基于jquery的button默认enter事件(回车事件)。
May 18 #Javascript
jquery构造器的实现代码小结
May 16 #Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 #Javascript
You might like
用Flash图形化数据(二)
2006/10/09 PHP
杏林同学录(九)
2006/10/09 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
JS 判断代码全收集
2009/04/28 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
Vue计算属性的学习笔记
2017/03/22 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
Django 视图层(view)的使用
2018/11/09 Python
python实现列表的排序方法分享
2019/07/01 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
python使用列表的最佳方案
2020/08/12 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
附答案的Java面试题
2012/11/19 面试题
申报职称专业技术个人的自我评价
2013/12/12 职场文书
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
初中作文评语
2014/12/25 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书