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 相关文章推荐
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
javascript每日必学之循环
Feb 19 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 Javascript
javascript实现左右缓动动画函数
Nov 25 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 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
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
浅谈PHP强制类型转换,慎用!
2013/06/06 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
漂亮的提示信息(带箭头)
2007/03/21 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python实现删除文件与目录的方法
2014/11/10 Python
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
机器学习python实战之手写数字识别
2017/11/01 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
报考公务员诚信承诺书
2014/08/29 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
团日活动总结格式
2015/05/11 职场文书
团队拓展训练感想
2015/08/07 职场文书
小学班级管理心得体会
2016/01/07 职场文书
python神经网络ResNet50模型
2022/05/06 Python