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 相关文章推荐
javascript中普通函数的使用介绍
Dec 19 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
May 12 Javascript
js仿淘宝商品放大预览功能
Mar 15 Javascript
bootstrap select插件封装成Vue2.0组件
Apr 17 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
基于vue的video播放器的实现示例
Feb 19 Vue.js
检测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
PHP mkdir()定义和用法
2009/01/14 PHP
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
js 表格隔行颜色
2009/12/02 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
Vue中img的src属性绑定与static文件夹实例
2017/05/18 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
简单谈谈python中的多进程
2016/11/06 Python
python 系统调用的实例详解
2017/07/11 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
python实现简单颜色识别程序
2020/02/19 Python
Django实现内容缓存实例方法
2020/06/30 Python
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
爱游人:Travelliker
2017/09/05 全球购物
实习生的自我鉴定范文欣赏
2013/11/20 职场文书
委托书的写法
2014/08/30 职场文书
党校毕业心得体会
2014/09/13 职场文书
MySQL8.0的WITH查询详情
2021/08/30 MySQL