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去掉字符串里的所有空格
Feb 08 Javascript
分享20款好玩的jQuery游戏
Apr 17 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
Jun 25 Javascript
JS鼠标滑过图片时切换图片实现思路
Sep 12 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
Es6 Generator函数详细解析
Feb 24 Javascript
微信小程序实现搜索历史功能
Mar 26 Javascript
JavaScript浅层克隆与深度克隆示例详解
Sep 01 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 采集程序原理分析篇
2010/03/05 PHP
php include加载文件两种方式效率比较
2010/08/08 PHP
PHP的加密方式及原理
2012/06/14 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
JavaScript EasyPager 分页函数
2011/05/25 Javascript
九种js弹出对话框的方法总结
2013/03/12 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
Europcar德国:全球汽车租赁领域的领导者
2018/08/15 全球购物
优衣库台湾官网:UNIQLO台湾
2019/02/01 全球购物
学校元旦晚会方案
2014/02/19 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
活动总结格式
2014/08/30 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL