jquery如何获取复选框的值


Posted in Javascript onDecember 12, 2013
<!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实现划词标记+划词搜索功能
Mar 06 Javascript
javascript入门·对象属性方法大总结
Oct 01 Javascript
jQuery学习笔记之控制页面实现代码
Feb 27 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 #Javascript
jQuery的each终止或跳过示例代码
Dec 12 #Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 #Javascript
js使下拉列表框可编辑不止是选择
Dec 12 #Javascript
深入理解JavaScript是如何实现继承的
Dec 12 #Javascript
Javascript Ajax异步读取RSS文档具体实现
Dec 12 #Javascript
javascripit实现密码强度检测代码分享
Dec 12 #Javascript
You might like
乐信RP2100的电路分析和打磨
2021/03/02 无线电
如何给phpadmin一个保护
2006/10/09 PHP
用 PHP5 轻松解析 XML
2006/12/04 PHP
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
用实例分析Python中method的参数传递过程
2015/04/02 Python
python实时监控cpu小工具
2018/06/21 Python
python 不以科学计数法输出的方法
2018/07/16 Python
python单例模式实例解析
2018/08/28 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
美国保健品专家:Life Extension
2018/05/04 全球购物
比较基础的php面试题及答案-填空题
2014/04/26 面试题
Delphi工程师笔试题
2013/09/21 面试题
医学院学生的自我评价分享
2013/11/19 职场文书
库房主管岗位职责
2013/12/31 职场文书
预备党员入党思想汇报
2014/01/04 职场文书
打架检讨书2000字
2014/02/22 职场文书
一年级学生评语大全
2014/04/21 职场文书
啤酒节策划方案
2014/05/28 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
钱学森电影观后感
2015/06/04 职场文书
golang中的并发和并行
2021/05/08 Golang
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫