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 相关文章推荐
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
js的with语句使用方法
Sep 21 Javascript
如何使用json在前后台进行数据传输实例介绍
Apr 11 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 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
全国FM电台频率大全 - 25 云南省
2020/03/11 无线电
zend framework配置操作数据库实例分析
2012/12/06 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(一)
2014/06/23 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
新闻内页-JS分页
2006/06/07 Javascript
javascript parseInt 大改造
2009/09/27 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
javascript中Array()数组函数详解
2015/08/23 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
js闭包引起的事件注册问题介绍
2016/03/29 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
初学Python函数的笔记整理
2015/04/07 Python
深入解析Python编程中super关键字的用法
2016/06/24 Python
Python正则简单实例分析
2017/03/21 Python
Django跨域请求CSRF的方法示例
2018/11/11 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
工艺工程师岗位职责
2014/03/04 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
pytorch 实现变分自动编码器的操作
2021/05/24 Python
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript