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 相关文章推荐
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
js实现微博发布小功能
Jan 12 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
详解JS实现系统登录页的登录和验证
Apr 29 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
星际中的相关伤害
2020/03/04 星际争霸
详解PHP编码转换函数应用技巧
2016/10/22 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
vue实现分页加载效果
2019/12/24 Javascript
vue实现循环滚动列表
2020/06/30 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
使用Python获取Linux系统的各种信息
2014/07/10 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
python logging日志模块原理及操作解析
2019/10/12 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
JPA的优势都有哪些
2013/07/04 面试题
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
房地产管理毕业生自荐信
2013/11/04 职场文书
小学音乐教学反思
2014/02/05 职场文书
垃圾桶标语
2014/06/24 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
2015年老干部工作总结
2015/04/23 职场文书
2016年元旦主持词
2015/07/06 职场文书
竞聘书的秘诀
2019/04/02 职场文书
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python