jQuery获取checkbox选中的值


Posted in Javascript onJanuary 28, 2016

1、问题背景

有几个多选框,选择其中的几个,获取选中的值

2、设计结果如下图所示:

jQuery获取checkbox选中的值

3、设计源码

<!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>jQuery获取checkbox选中的值</title> 
<script type="text/javascript" src="jquery-2.2.0.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$("input[name='ckb']:checkbox").click(function() { 
var str = ""; 
$("input[name='ckb']:checkbox").each(function() { 
if($(this).is(":checked")) 
{ 
str += $(this).attr("value")+","; 
} 
}); 
if(str != null && str.length > 1) 
{ 
str = str.substring(0,str.length-1); 
} 
alert(str); 
}); 
}); 
</script> 
</head> 
<body> 
<input type="checkbox" name="ckb" value="1"/>苹果 
<input type="checkbox" name="ckb" value="2"/>橘子 
<input type="checkbox" name="ckb" value="3"/>梨子 
<input type="checkbox" name="ckb" value="4"/>香蕉 
</body> 
</html>

下面给大家分享一段代码关于jQuery操作CheckBox的方法(选中,取消,取值)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New document.nbsp;</TITLE> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<SCRIPT LANGUAGE="javascript" src="http://www.cnjquery.com/demo/jquery.js"></script> 
<SCRIPT LANGUAGE="javascript"> 
<!-- 
$("document.quot;).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> 
<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> 
<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 
<input type="checkbox" name="checkbox" value="checkbox7"> 
checkbox7 
<input type="checkbox" name="checkbox" value="checkbox8"> 
checkbox8 
</form>

以上所述是小编给大家分享的jQuery获取checkbox选中的值,希望对大家有所帮助。

Javascript 相关文章推荐
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
JavaScript中对象属性的添加和删除示例
May 12 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
May 27 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
JavaScript访问字符串中单个字符的两种方法
Jul 03 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
详解jquery选择器的原理
Aug 01 jQuery
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
Vue实现手机计算器
Aug 17 Javascript
探讨JavaScript语句的执行过程
Jan 28 #Javascript
Javascript复制实例详解
Jan 28 #Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
Jan 28 #Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 #Javascript
js+canvas绘制矩形的方法
Jan 28 #Javascript
js+canvas简单绘制圆圈的方法
Jan 28 #Javascript
谈一谈javascript闭包
Jan 28 #Javascript
You might like
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
基于jquery的$.ajax async使用
2011/10/19 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
详解JavaScript的变量
2019/04/04 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
Python实现的归并排序算法示例
2017/11/21 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
C#面试问题
2016/07/29 面试题
教育专业自荐书范文
2013/12/17 职场文书
大学生毕业求职自荐书范文
2014/02/04 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
项目合作意向书范本
2014/04/01 职场文书
报告会主持词
2014/04/02 职场文书
应届毕业生求职信范文
2014/05/08 职场文书
汽车转让协议书范本
2014/12/07 职场文书
丽江古城导游词
2015/02/03 职场文书
放射科岗位职责
2015/02/14 职场文书
alibaba seata服务端具体实现
2022/02/24 Java/Android