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 addBookmark 加入收藏 多浏览器兼容
Aug 15 Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
Nov 02 Javascript
js 字符串转化成数字的代码
Jun 29 Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 Javascript
理解Javascript闭包
Nov 01 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
jquery为页面增加快捷键示例
Jan 31 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
详解Vue双向数据绑定原理解析
Sep 11 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 Javascript
详解JS函数防抖
Jun 05 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
UCenter Home二次开发指南
2009/05/28 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
使用隐藏的new来创建对象
2011/03/29 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
如何在postman测试用例中实现断言过程解析
2020/07/09 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
Python3 翻转二叉树的实现
2019/09/30 Python
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
深入探讨opencv图像矫正算法实战
2021/05/21 Python
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android