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 相关文章推荐
JavaScript更改class和id的方法
Oct 10 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
Jun 10 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 Javascript
ES6中module模块化开发实例浅析
Apr 06 Javascript
React精髓!一篇全概括小结(急速)
May 23 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
vue打开子组件弹窗都刷新功能的实现
Sep 21 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
原生JavaScript实现进度条
Feb 19 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
PHP中的extract的作用分析
2008/04/09 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
CI框架中$this-&gt;load-&gt;library()用法分析
2016/05/18 PHP
微信支付开发交易通知实例
2016/07/12 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
Open and Print a Word Document
2007/06/15 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
js时间戳转为日期格式的方法
2015/12/28 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
vuex实现简易计数器
2016/10/27 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
python实现支付宝转账接口
2019/05/07 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
python 实现list或string按指定分段
2019/12/25 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
Python创建自己的加密货币的示例
2021/03/01 Python
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
技术人员面试提纲
2013/11/28 职场文书
家长给孩子的评语
2014/01/30 职场文书
2015年加油站工作总结
2015/05/13 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电