jquery获取复选框被选中的值


Posted in Javascript onApril 10, 2014
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<mce:style><!-- --></mce:style><style mce_bogus="1"> 
</style> 
<title>JS获取复选框被选中的值</title> 
</head> 
<body> 
<input type="checkbox" name="test" value="0" />0 
<input type="checkbox" name="test" value="1" />1 
<input type="checkbox" name="test" value="2" />2 
<input type="checkbox" name="test" value="3" />3 
<input type="checkbox" name="test" value="4" />4 
<input type="checkbox" name="test" value="5" />5 
<input type="checkbox" name="test" value="6" />6 
<input type="checkbox" name="test" value="7" />7 
<input type="button" onclick="chk()" value="提 交" /> 
</body> 
</html

JS代码
<mce:script src="jquery.js" mce_src="jquery.js"></mce:script><!--这是载入jquery.js文件,如果不使用jquery可以去掉--> 
<mce:script type="text/javascript"><!-- function chk(){ 
var obj=document.getElementsByName('test'); //选择所有name="'test'"的对象,返回数组 
//取到对象数组后,我们来循环检测它是不是被选中 
var s=''; 
for(var i=0; i<obj.length; i++){ 
if(obj[i].checked) s+=obj[i].value+','; //如果选中,将value添加到变量s中 
} 
//那么现在来检测s的值就知道选中的复选框的值了 
alert(s==''?'你还没有选择任何内容!':s); 
} 
function jqchk(){ //jquery获取复选框值 
var chk_value =[]; 
$('input[name="test"]:checked').each(function(){ 
chk_value.push($(this).val()); 
}); 
alert(chk_value.length==0 ?'你还没有选择任何内容!':chk_value); 
} 
// --></mce:script>

对checkbox的其他几个操作

1. 全选
2. 取消全选
3. 选中所有奇数
4. 反选
5. 获得选中的所有值

js代码

$("document").ready(function(){ 
$("#btn1").click(function(){ 
$("[name='checkbox']").attr("checked",'true');//全选 
}) 
$("#btn2").click(function(){ 
$("[name='checkbox']").removeAttr("checked");//取消全选 
}) 
$("#btn3").click(function(){ 
$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数 
}) 
$("#btn4").click(function(){ 
$("[name='checkbox']").each(function(){//反选 
if($(this).attr("checked")){ 
$(this).removeAttr("checked"); 
} 
else{ 
$(this).attr("checked",'true'); 
} 
}) 
}) 
$("#btn5").click(function(){//输出选中的值 
var str=""; 
$("[name='checkbox'][checked]").each(function(){ 
str+=$(this).val()+"/r/n"; 
//alert($(this).val()); 
}) 
alert(str); 
}) 
})

html代码:
<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>louis-blog >> jQuery 对checkbox的操作</title> 
<mce:script type='text/javascript' src="http://leotheme.cn/wp-includes/js/jquery/jquery.js" mce_src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"></mce:script> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
$("document").ready(function(){ 
$("#btn1").click(function(){ 
$("[name='checkbox']").attr("checked",'true');//全选 
}) 
$("#btn2").click(function(){ 
$("[name='checkbox']").removeAttr("checked");//取消全选 
}) 
$("#btn3").click(function(){ 
$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数 
}) 
$("#btn4").click(function(){ 
$("[name='checkbox']").each(function(){//反选 
if($(this).attr("checked")){ 
$(this).removeAttr("checked"); 
} 
else{ 
$(this).attr("checked",'true'); 
} 
}) 
}) 
$("#btn5").click(function(){//输出选中的值 
var str=""; 
$("[name='checkbox'][checked]").each(function(){ 
str+=$(this).val()+"/r/n"; 
//alert($(this).val()); 
}) 
alert(str); 
}) 
}) 
--> 
</SCRIPT> 
</HEAD> 
<body style="text-align:center;margin: 0 auto;font-size: 12px;" mce_style="text-align:center;margin: 0 auto;font-size: 12px;"> 
<div style="border: 1px solid #999; width: 500px; padding: 15px; background: #eee; margin-top: 150px;"> 
<form name="form1" method="post" action=""> 
<input type="button" id="btn1" value="全选"> 
<input type="button" id="btn2" value="取消全选"> 
<input type="button" id="btn3" value="选中所有奇数"> 
<input type="button" id="btn4" value="反选"> 
<input type="button" id="btn5" value="获得选中的所有值"> 
<br /><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 
</form> 
</div> 
</body> 
</HTML>
Javascript 相关文章推荐
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
Dec 03 Javascript
Ext对基本类型的扩展 ext,extjs,format
Dec 25 Javascript
JS实现鼠标单击与双击事件共存
Mar 08 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
微信小程序实现文字跑马灯
May 26 Javascript
微信小程序中为什么使用var that=this
Aug 27 Javascript
vue cli4.0项目引入typescript的方法
Jul 17 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 Javascript
简单聊聊TypeScript只读修饰符
Apr 06 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 #Javascript
用js设置下拉框为只读的小技巧
Apr 10 #Javascript
js获取上传文件大小示例代码
Apr 10 #Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 #Javascript
js实现图片旋转的三种方法
Apr 10 #Javascript
javascript:void(0)的问题使用探讨
Apr 10 #Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 #Javascript
You might like
也谈 PHP 和 MYSQL
2006/10/09 PHP
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
php 中的4种标记风格介绍
2012/05/10 PHP
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
python使用chardet判断字符串编码的方法
2015/03/13 Python
Python实现简单登录验证
2016/04/13 Python
深入理解Python中装饰器的用法
2016/06/28 Python
python机器学习之神经网络(二)
2017/12/20 Python
Python父目录、子目录的相互调用方法
2019/02/16 Python
django foreignkey(外键)的实现
2019/07/29 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
html5定位并在百度地图上显示的示例
2014/04/27 HTML / CSS
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
部队领导证婚词
2014/01/12 职场文书
单位成立周年感言
2014/01/26 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫