jquery获取复选框被选中的值


Posted in Javascript onMarch 22, 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 相关文章推荐
javascript 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
深入理解javascript构造函数和原型对象
Sep 23 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
vue源码解析之事件机制原理
Apr 21 Javascript
vue.js input框之间赋值方法
Aug 24 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
js实现指定时间倒计时效果
Aug 26 Javascript
使用typescript构建Vue应用的实现
Aug 26 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 #Javascript
使用JS取得焦点(focus)元素代码
Mar 22 #Javascript
查找Oracle高消耗语句的方法
Mar 22 #Javascript
利用JavaScript检测CPU使用率自己写的
Mar 22 #Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 #Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 #Javascript
js获得网页背景色和字体色的方法
Mar 21 #Javascript
You might like
php disk_free_space 返回目录可用空间
2010/05/10 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
PHP重载基础知识回顾
2020/09/10 PHP
js下弹出窗口的变通
2007/04/18 Javascript
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
js实现简单点赞操作
2020/03/17 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
python对url格式解析的方法
2015/05/13 Python
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
python根据时间获取周数代码实例
2019/09/30 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
网站开发实习生的自我评价
2013/12/11 职场文书
企业为何需要商业计划书
2013/12/26 职场文书
年会搞笑主持词串词
2014/03/24 职场文书
美食节目策划方案
2014/05/31 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
2015年中秋节活动总结
2015/03/23 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android
Java实现房屋出租系统详解
2021/10/05 Java/Android