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小框架 fly javascript framework
Nov 26 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
Oct 26 Javascript
网页右下角弹出窗体实现代码
Jun 05 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
Jq通过td获取同行其它列td的方法
Oct 05 Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
搭建一个Koa后端项目脚手架的方法步骤
May 30 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 Javascript
JS实现简易贪吃蛇游戏
Aug 24 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
Memcache 在PHP中的使用技巧
2010/02/08 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
Bootstrap4如何定制自己的颜色和风格
2018/02/26 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
Python cx_freeze打包工具处理问题思路及解决办法
2016/02/13 Python
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
Python3多线程操作简单示例
2018/05/22 Python
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
《胖乎乎的小手》教学反思
2014/02/26 职场文书
医学专业应届生的自我评价
2014/02/28 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
学校节能减排倡议书
2014/05/16 职场文书
信用卡工作证明模板
2014/09/14 职场文书
户籍证明模板
2014/09/28 职场文书
工资收入证明
2014/10/07 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
2015初中教导处工作总结
2015/07/21 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技
实例详解Python的进程,线程和协程
2022/03/13 Python