jQuery获取checkbox选中的值
更新时间：2016年01月28日 14:58:48 投稿：mrr
jquery checkbox选择器在程序开发中经常会用到，接下来通过实例代码给大家介绍jquery获取checkbox选中的值，需要的朋友参考下
1、问题背景
有几个多选框，选择其中的几个，获取选中的值
2、设计结果如下图所示：
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选中的值，希望对大家有所帮助。
相关文章
下面小编就为大家带来一篇jquery 动态增加删除行的简单实例(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
最近需要用jquery获取一些dom数据的操作，发现jquery的选择器非常强大，很方便进行一些dom操作，下面就专门针对这块内容做个简单的介绍,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了在myeclipse中如何加入jquery代码提示功能,需要的朋友可以参考下2014-06-06
不过最近安装了FF3.5正式版，发现这种方法在它下面得不到值，就去看jquery的帮助文档，在文档中对select选中的引用是用如下方法2009-07-07
jquery formvalidator插件是不错的国产验证插件了，做点普通的校验也是很方便的，但最近遇到个问题，发现如果表单整个表单是AJAX提交时，就不能按传统的做法了2013-01-01
这篇文章主要介绍了jQuery动态生成的元素绑定事件操作,结合实例形式分析了jQuery事件绑定的原理及动态生成的元素绑定事件相关操作技巧,需要的朋友可以参考下2019-05-05
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
这篇文章主要介绍了使用jQuery判断Div是否在可视区域的方法 判断div是否可见2016-02-02
jQuery function想必大家都不会陌生，web前端开发人员经常会接触到，下面为大家介绍下它的正确书写方法，感兴趣的朋友可以参考下2013-08-08
eclipse导入jquery包后报错，下面有个不错的解决方法,需要的朋友可以参考下2014-02-02
在 jQuery 中，实际注册的事件处理函数是一个匿名的闭包函数，这个函数最终都是通过调用 jQuery.event.handle 进行处理的。2010-08-08
最新评论