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代码
Aug 29 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
JavaScript递归函数定义与用法实例分析
Jan 24 Javascript
layui中的switch开关实现方法
Sep 03 Javascript
vue-next/runtime-core 源码阅读指南详解
Oct 25 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 Javascript
详解vue高级特性
Jun 09 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 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命令行模式采集股票趋势信息
2016/08/09 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
深入理解javascript prototype的相关知识
2019/09/19 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
python快速排序代码实例
2013/11/21 Python
Python2中的raw_input() 与 input()
2015/06/12 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
公司业务主管岗位职责
2013/12/07 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
班干部演讲稿
2014/04/24 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
2014年医生工作总结
2014/11/21 职场文书
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技
移除Selenium中window.navigator.webdriver值
2022/06/10 Python