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 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
jQuery live
May 15 Javascript
Cookie 小记
Apr 01 Javascript
jQuery hover 延时器实现代码
Mar 12 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
vue实现购物车加减
May 30 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
php切割页面div内容的实现代码分享
2012/07/31 PHP
关于php内存不够用的快速解决方法
2013/10/26 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
phalcon框架使用指南
2016/02/23 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
浅析Javascript使用include/require
2013/11/13 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
echarts学习笔记之箱线图的分析与绘制详解
2017/11/22 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
用Python输出一个杨辉三角的例子
2014/06/13 Python
Django框架中方法的访问和查找
2015/07/15 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
python 元组和列表的区别
2020/12/30 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
学生打架检讨书大全
2014/01/23 职场文书
酒后驾驶检讨书
2014/01/27 职场文书
客服部工作职责范本
2014/02/14 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
三八妇女节活动总结
2014/05/04 职场文书
2015年招聘工作总结
2014/12/12 职场文书
收入证明怎么写
2015/06/12 职场文书
深入探讨opencv图像矫正算法实战
2021/05/21 Python
Python 用户输入和while循环的操作
2021/05/23 Python