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 相关文章推荐
javascript 建设银行登陆键盘
Jun 10 Javascript
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
vue前后分离调起微信支付
Jul 29 Javascript
vue 实现tab切换保持数据状态
Jul 21 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
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
PHP速成大法
2015/01/30 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
PHP实现浏览器格式化显示XML的方法示例
2019/01/22 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
javascript jq 弹出层实例
2013/08/25 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
axios学习教程全攻略
2017/03/26 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
VUE中的无限循环代码解析
2017/09/22 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
Python元组知识点总结
2019/02/18 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
Python OS模块实例详解
2019/04/15 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
幼儿园中秋节活动反思
2014/02/16 职场文书
感恩教育活动总结
2014/05/05 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
争先创优活动总结
2014/08/27 职场文书
大一新生期末自我评价
2014/09/12 职场文书
公务员个人年终总结
2015/02/12 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书