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中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
js轮盘抽奖实例分析
Apr 17 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
详解vee-validate的使用个人小结
Jun 07 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
Nov 22 Javascript
JavaScript实现身份证验证代码实例
Aug 26 Javascript
详解mpvue开发微信小程序基础知识
Sep 23 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 Javascript
如何手写一个简易的 Vuex
Oct 10 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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
php代码书写习惯优化小结
2013/06/20 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
基于BootStarp的Dailog
2016/04/28 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
Python原始字符串(raw strings)用法实例
2014/10/13 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
详解python单元测试框架unittest
2018/07/02 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
Python配置文件处理的方法教程
2019/08/29 Python
python SVD压缩图像的实现代码
2019/11/05 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
2017/06/15 HTML / CSS
const和static readonly区别
2013/05/20 面试题
实习单位接收函
2014/01/11 职场文书
高三生物教学反思
2014/01/25 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
小学社会实践活动总结
2014/07/03 职场文书
新闻人物通讯稿
2014/10/09 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
离职感谢信
2015/01/21 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
护理培训心得体会
2016/01/22 职场文书
Java 死锁解决方案
2022/05/11 Java/Android