jquery获取复选框的值的简单实例


Posted in Javascript onMay 26, 2016
<!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>

以上这篇jquery获取复选框的值的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
vue项目环境变量配置的实现方法
Oct 12 Javascript
JS无限级导航菜单实现方法
Jan 05 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 Javascript
vue-i18n实现中英文切换的方法
Jul 06 Javascript
vue路由分文件拆分管理详解
Aug 13 Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 #Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 #Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 #Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
May 26 #Javascript
jquery获取所有选中的checkbox实现代码
May 26 #Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 #Javascript
动态加载js、css的简单实现代码
May 26 #Javascript
You might like
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
php获取文章上一页与下一页的方法
2014/12/01 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
js局部刷新页面时间具体实现
2013/07/04 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
跟老齐学Python之正规地说一句话
2014/09/28 Python
在Mac OS上搭建Python的开发环境
2015/12/24 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
Python Flask-web表单使用详解
2017/11/18 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
python 星号(*)的多种用途
2020/09/21 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
PHP经典面试题
2016/09/03 面试题
四种会话跟踪技术
2015/05/20 面试题
印刷工程专业应届生求职信
2013/09/29 职场文书
计算机应用职专应届生求职信
2013/11/12 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
银行职员个人的工作自我评价
2014/02/15 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书
SQLServer之常用函数总结详解
2021/08/30 SQL Server
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS