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 相关文章推荐
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
javascript利用apply和arguments复用方法
Nov 25 Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
js实现的在本地预览图片功能示例
Nov 09 Javascript
vue实现井字棋游戏
Sep 29 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 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
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
php与java通过socket通信的实现代码
2013/10/21 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
简单的JS时钟实例讲解
2016/01/13 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
实例讲解python函数式编程
2014/06/09 Python
Python实现的最近最少使用算法
2015/07/10 Python
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
Python编写一个闹钟功能
2017/07/11 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
python空元组在all中返回结果详解
2020/12/15 Python
Html5之title吸顶功能
2018/06/04 HTML / CSS
技校毕业生的自我评价
2013/12/27 职场文书
小学安全教育材料
2014/02/17 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
网管求职信
2014/03/03 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
授权委托书公证
2014/09/14 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
婚内分居协议书范文
2014/11/26 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
联村联户简报
2015/07/21 职场文书
Redis Stream类型的使用详解
2021/11/11 Redis