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中instanceof运算符的用法总结
Nov 19 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
基于JavaScript实现数码时钟效果
Mar 30 Javascript
bootstrap响应式工具使用详解
Nov 29 Javascript
vue+egg+jwt实现登录验证的示例代码
May 18 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 Javascript
vue中watch和computed的区别与使用方法
Aug 23 Javascript
纯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中文件上传的安全问题
2006/10/09 PHP
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
使用PHP+MySql实现微信投票功能实例代码
2017/09/29 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
收集的10个免费的jQuery相册
2011/02/26 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
python for和else语句趣谈
2019/07/02 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
Noon埃及:埃及在线购物
2019/11/26 全球购物
电信营业员自我评价分享
2014/01/17 职场文书
好矿嫂事迹材料
2014/01/21 职场文书
中秋节活动总结
2014/08/29 职场文书
质量主管工作职责
2014/09/26 职场文书
python异常中else的实例用法
2021/06/15 Python
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS