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 相关文章推荐
JavaScript入门教程(6) Window窗口对象
Jan 31 Javascript
JavaScript 错误处理与调试经验总结
Aug 10 Javascript
jQuery调用WebService的实现代码
Jun 19 Javascript
JS获取html元素的标记名实现方法
Oct 08 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
JSONP基础知识详解
Mar 19 Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 Javascript
简单实现jQuery弹窗效果
Oct 30 jQuery
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 Javascript
修改npm全局安装模式的路径方法
May 15 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
纯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
PHP 图片文件上传实现代码
2010/12/29 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
php处理斐波那契数列非递归方法
2012/02/04 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
不错的asp中显示新闻的功能
2006/10/13 Javascript
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
js实现聊天对话框
2020/02/08 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
python读取LMDB中图像的方法
2018/07/02 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
使用django实现一个代码发布系统
2019/07/18 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
Python实现ATM系统
2020/02/17 Python
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
户外亲子活动策划方案
2014/02/07 职场文书
《湘夫人》教学反思
2014/02/21 职场文书
意向协议书
2015/01/27 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
生产设备维护保养制度
2015/08/06 职场文书