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 相关文章推荐
淘宝搜索框效果实现分析
Mar 05 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
理解jquery事件冒泡
Jan 03 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
重新理解JavaScript的六种继承方式
Mar 24 Javascript
详解Node.js串行化流程控制
May 04 Javascript
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
Vue.js中的组件系统
May 30 Javascript
JS实现购物车基本功能
Nov 08 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
自动分页的不完整解决方案
2007/01/12 PHP
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
Python字符编码与函数的基本使用方法
2017/09/30 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
Python绘制组合图的示例
2020/09/18 Python
利用python 下载bilibili视频
2020/11/13 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
市场部专员岗位职责
2013/11/30 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
加油口号大全
2014/06/13 职场文书
会议通知格式范文
2015/04/15 职场文书
男人帮观后感
2015/06/18 职场文书
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python