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 相关文章推荐
JS清除IE浏览器缓存的方法
Jul 26 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
Javascript中判断对象是否为空
Jun 10 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 Javascript
VSCode搭建React Native环境
May 07 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 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
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
php设计模式 Facade(外观模式)
2011/06/26 PHP
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
Python绘图实现显示中文
2019/12/04 Python
Python如何实现爬取B站视频
2020/05/20 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
Django视图类型总结
2021/02/17 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
优秀班集体申报材料
2014/12/25 职场文书
西双版纳导游词
2015/02/03 职场文书
学习心得体会
2019/06/20 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript