jquery获取选中checkbox复选框的值
分类:实例代码
本章节介绍一下如何使用jQuery获取选中的checkbox复选框的值。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(document).ready(function () { $("#bt").click(function () { var cked = $("#box input:checked"); var arr = []; $.each(cked,function (index,ele) { arr.push(ele.value); }) $("#show").text(arr); }) }) </script> </head> <body> <div id="box"> <input type="checkbox" value="1"/> <input type="checkbox" checked value="2" /> <input type="checkbox" checked value="3" /> <input type="checkbox" value="4" /> <input type="checkbox" value="5" /> <input type="checkbox" value="6" /> </div> <div id="show"></div> <input type="button" id="bt" value="查看效果"/> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).$(document).ready(function () {}),当文档结构完全加载完毕再去执行函数中的代码。
(2).$("#bt").click(function () {}),为按钮注册click事件处理函数。
(3).var cked = $("#box input:checked"),获取被选中的复选框元素集合。
(4).var arr = [],声明一个空数组用来存储选中复选框的value值。
(5).$.each(cked,function (index,ele) {
arr.push(ele.value);
}),将选中复选框的value值存入数组。
(6).$("#show").text(arr),显示数组中存储的内容,这里其实有一个隐式的数据类型转换,等同于arr.toString()
二.相关阅读:
(1).:checked选择器可以参阅jQuery :checked一章节。
(2). $.each()可以参阅jQuery.each()一章节。
(3).push()可以参阅javascript push()一章节。
(4).text()可以参阅jQuery text()方法一章节。