jquery获取复选框被选中的值


Posted in Javascript onMarch 22, 2014
<!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>
Javascript 相关文章推荐
js 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
Javascript的无new构建实例详解
May 15 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
深入理解ES7的async/await的用法
Sep 09 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 Javascript
React组件对子组件children进行加强的方法
Jun 23 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 #Javascript
使用JS取得焦点(focus)元素代码
Mar 22 #Javascript
查找Oracle高消耗语句的方法
Mar 22 #Javascript
利用JavaScript检测CPU使用率自己写的
Mar 22 #Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 #Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 #Javascript
js获得网页背景色和字体色的方法
Mar 21 #Javascript
You might like
杏林同学录(六)
2006/10/09 PHP
PHP查询快递信息的方法
2015/03/07 PHP
php表单处理操作
2017/11/16 PHP
Using the TextRange Object
2006/10/14 Javascript
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
js图片处理示例代码
2014/05/12 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
对VUE中的对象添加属性
2018/09/18 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
python利用datetime模块计算时间差
2015/08/04 Python
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
python生成特定分布数的实例
2019/12/05 Python
python 错误处理 assert详解
2020/04/20 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
python算的上脚本语言吗
2020/06/22 Python
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
关爱女孩行动实施方案
2014/03/13 职场文书
2014年大学生就业规划书
2014/04/04 职场文书
竞选部长演讲稿
2014/04/26 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
python实现网络五子棋
2021/04/11 Python