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 相关文章推荐
JQuery 常用方法基础教程
Feb 06 Javascript
JS 对输入框进行限制(常用的都有)
Jul 30 Javascript
js 判断文件类型并控制表单提交示例代码
Nov 14 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
Javascript基础之数组的使用
May 13 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
Jun 26 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 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
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
php实现mysql数据库备份类
2008/03/20 PHP
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
浅析js绑定事件的常用方法
2016/05/15 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
Fiddler如何抓取手机APP数据包
2016/01/22 Python
python实现斐波那契数列的方法示例
2017/01/12 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
HEMA法国:荷兰原创设计
2019/02/21 全球购物
高中的职业生涯规划书
2013/12/28 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
Python实现单例模式的5种方法
2021/06/15 Python
MySQL自定义函数及触发器
2022/08/05 MySQL