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的仿百度的鼠标移入图片抖动效果
Sep 17 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
jquery中ajax使用error调试错误的方法
Feb 08 Javascript
JavaScript的==运算详解
Jul 20 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 Javascript
vue3.0实现插件封装
Dec 14 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
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
javascript闭包的理解和实例
2010/08/12 Javascript
JavaScript 原型继承
2011/12/26 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
Python递归遍历列表及输出的实现方法
2015/05/19 Python
Python对象转JSON字符串的方法
2016/04/27 Python
numpy自动生成数组详解
2017/12/15 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
详解Python 函数参数的拆解
2020/09/02 Python
利用python爬取有道词典的方法
2020/12/08 Python
商超业务员岗位职责
2014/03/12 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
图书室标语
2014/06/21 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
《给予树》教学反思
2016/03/03 职场文书
教你部署vue项目到docker
2022/04/05 Vue.js