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 相关文章推荐
js用Date对象的setDate()函数对日期进行加减操作
Sep 18 Javascript
javascript 闭包详解
Jul 02 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
激动人心的 Angular HttpClient的源码解析
Jul 10 Javascript
基于Vue的ajax公共方法(详解)
Jan 20 Javascript
使用javascript做在线算法编程
May 25 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 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
UCenter Home二次开发指南
2009/05/28 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
python pillow模块使用方法详解
2019/08/30 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
python安装后的目录在哪里
2020/06/21 Python
C++:局部变量能否和全局变量重名
2014/03/03 面试题
初一科学教学反思
2014/01/27 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS