jQuery实现获取选中复选框的值实例详解
应用场景：
我们应该经常见到系统中出现列表，会有一个对列表数据的操作（如删除， 修改，查看等）。我们可以在每个列表项后面加一个删除按钮，把列表项的相关参数（如 id）post到后台进行删除。当然如果你每次只要删除一两条数据这样子做并没有什么问题，但是如果你需要一次性删 除100条，你还去一条 条的删除吗？每一次删除10条会不会更好些呢？
好了，接下来。我们就使用jQuery解决这个问题。
首先，假设我们需要删除5个列表项。HTML里面列表标签是ul和ol, 其中ul是无序的，而ol是有序。每一个列表项使用li。
<ul id="fruit"> <li><input type="checkbox" value="0001"/>苹果</li> <li><input type="checkbox" value="0002"/>梨子</li> <li><input type="checkbox" value="0003"/>芒果</li> <li><input type="checkbox" value="0004"/>山楂</li> <li><input type="checkbox" value="0005"/>香蕉</li> </ul>
假设我们只需传递水果的ID到后台就可以删除所有水果。那么传递一个数组为[0001,0002,0003,0004,0005]到后台就可以了。所以，我们需要获取5个li元素中input标签的value值。
很明显，你的思路可能是利用jQuery筛选器先得到li下的input对象数组，再遍历这个数组，判断每一个input对象,然后判断input对象是否选中，选中就用val()函数获取它的值，然后把该值放入一个用来存储id的数组arr中。
【关键点】选择器，遍历，数组。
1.获取被选中的数组对象
jQuery的选择器中' :checkbox' 是查找所有复选框。
$("#fruit :checkbox");
2.遍历这个对象数组
jQeury的each函数：为每个匹配元素规定运行的函数。
each函数：
语法：
$(selector).each(function(index,element))
| 参数 | 描述 |
|---|---|
| function(index,element) | 必需。为每个匹配元素规定运行的函数。index - 选择器的 index 位置element - 当前的元素（也可使用 “this” 选择器） |
遍历后，判断复选框是否被选中.
Jquery的prop函数(prop函数是jQuery1.6版本上的):
prop(name|properties|key,value|fn)
获取在匹配的元素集中的第一个元素的属性值。随着一些内置属性的DOM元素 或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误
| 参数 | 类型 | 版本 |
|---|---|---|
| name(属性名称) | String | V1.6 |
| properties(作为属性的“名/值对“对象) | Map(String, Object) | V1.6 |
| key,function(index, attr) (属性名称，属性值) | String, Function | V1.6 |
[注意]key,function(index,attr)中返回的属性值的函数，第一个参数为当前
元素的索引值，第二个参数为原先的属性值。
示例：
1.参数name的描述：
选中复选框的为true, 没选中为false
选中：
$("input[type='checkbox']").prop("checked"，true);
没选中：
$("input[type='checkbox']").prop("checked"，false);
2.参数perporties描述：
禁用页面上的所有复选框。
$("input[type='checkbox']").prop({disabled:true});
3.参数key,回调函数描述：
通过函数来设置所有页面上的复选框反选。
$("input[type='checkbox']").prop("checked",fucntion(i, val){
return !val;
});
3.数组
这个最简单。jQuery定义一个数组。
var arr = new Array();
所以最后的代码：
<!DOCTYPE html>
<html>
<head>
<title>Jquery复选框练习</title>
<!-- 引入jQuery，引入你自己的jQuery文件 -->
<script type="text/javascript" src="../scripts/jquery-1.7.2.js"></script>
</head>
<body>
<div>
<p>选择要购买的水果</p>
<ul class="fruit">
<li><input type="checkbox" value="001"/>苹果</li>
<li><input type="checkbox" value="002"/>雪梨</li>
<li><input type="checkbox" value="003"/>芒果</li>
<li><input type="checkbox" value="004"/>菠萝</li>
</ul>
<input type="checkbox" id="All"/>
<button id="checkAll">全选</button>
<button id="nothing">全不选</button>
<button id="reverseAll">反选</button>
<button class="chooseFruit">购买</button>
<script type="text/javascript">
<!-- 选择全部/全不选 -->
$("#All").click(function(){
if("this.checked"){
$("#fruit :checkbox").prop("checked", true);
}else{
$("#fruit :checkbox").prop("checked", false);
}
});
<!--选择全部-->
$("#checkAll").click(function(){
$("#fruit :checkbox").prop("checked", true);
});
<!--全不选-->
$("#nothing").click(function(){
$("#fruit :checkbox").prop("checked", false);
});
<!--反选-->
$("#reverseAll").click(function(){
$("#fruit :checkbox").each(function(i){
$(this).prop("checked", !$(this).prop("checked"));
});
});
<!--获取选中复选框的值-->
$(".chooseFruit").click(function(){
var arr = new Array();
$("#fruit :checkbox[checked]").each(function(i){
arr[i] = $(this).val();
});
var vals = arr.join(",");
console.log(vals);
});
</script>
</div>
</body>
</html>
至此，jQuery实现了复选框的取值，是不是非常简单？
总结
以上所述是小编给大家介绍的jQuery实现获取选中复选框的值，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
jquery获取复选框被选中的值
复制代码 代码如下: <!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"> &l
-
javascript实现复选框选中属性
熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好了.博主之前用户不少方法,经常Google到一些这个不好那个不好的文章,到后面自己都混乱了.今天偶然看到一篇外国的博客,觉得讲解的很不错,打算翻译成中文,并加上了一些自己的见解. 如果你从事web开发并且在你开发的网页中有复选框,你可能需要判断当前该复选框是否选中,进而执行一些条件语句.有很多种方法来判断一个复选框是否选中. 让我们先来看看原生的javascr
-
js全选实现和判断是否有复选框选中的方法
本文实例讲述了js全选实现和判断是否有复选框选中的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: function actionEvent(methodname){ var form = document.forms[0]; if(validateIsSelect(form.all, form.productids)){ form.action='<html:rewrite action="/control
-
jquery判断复选框是否被选中的方法
jquery 判断复选框是否选中以及如何选中的问题做一下总结. 进入正题,还是当页面有如下一组复选框的时候: <input type="checkbox" name="fruit" value="apple" />苹果 <input type="checkbox" name="fruit" value="orange" />橘子 <input type=&q
-
js实现选中复选框文字变色的方法
本文实例讲述了js实现选中复选框文字变色的方法.分享给大家供大家参考.具体如下: 这里实现选中复选框时,文字加上一个背景色,变通一下,还是很有用的. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-checkbox-cha-font-color-codes/ 具体代码如下: <html> <head> <title>选中复选框文字变色</title> <style> .checkbox {
-
JavaScript简单判断复选框是否选中及取出值的方法
本文实例讲述了JavaScript简单判断复选框是否选中及取出值的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript 获取复选框的值,有朋友在刚开始利用表单提交数据的时候,一般都会遇到表单中有一个特别的元素--复选框,判断它是否选中以及获取它的值 ,好像跟其它的表单元素有点不一样,本代码将为您展示如何获取复选框的值并判断是否被选中. 运行效果如下图所示: 具体代码如下: <title>JavaScript 获取复选框的值</title> <script>
-
JavaScript检测并限制复选框选中个数的方法
本文实例讲述了JavaScript检测并限制复选框选中个数的方法.分享给大家供大家参考.具体如下: 这里用JavaScript判断复选框中否选中,同时可以限制复选框的选中个数,这是一个比较实用的JS表单判断示例,复选框的是否选中曾经让很多人纳闷,现在好了,这段代码帮你解决了难题. 运行效果截图如下: 具体代码如下: <html> <head> <title>判断复选框中否选中</title> <script> var check_num = 0;
-
关于extjs treepanel复选框选中父节点与子节点的问题
extjs 如图,实现带有复选框的树,选中父节点时,选中所有子节点.取消所有子节点时,才能取消根节点. 复制代码 代码如下: var Fpanel = new Ext.tree.TreePanel({ id:'ptree', region:'west', layout:'anchor', border:false, rootVisible: false, root:new Ext.tree.AsyncTreeNode({}), listeners:{ "checkchange": f
-
javascript判断复选框是否选中的方法
之前总结了一下关于jquery如何判断复选框是否选中的问题,今天总结如何判断js复选框是否选中 javascript判断复选框是否选中,下面通过例子来说明(现在有如下的一组复选框): <input type="checkbox" name="fruit" value="apple" />苹果 <input type="checkbox" name="fruit" value="o
-
javascript判断单选框或复选框是否选中方法集锦
提示:getEmementsByName方法的作用是根据 NAME 标签属性的值获取对象的集合. 样例一<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>判断单选框或复选框是否选中</title> </head> <body> <input name
-
js判断复选框是否选中的方法示例【基于jQuery】
本文实例讲述了js判断复选框是否选中的方法.分享给大家供大家参考,具体如下: 代码 //设置选中 $('#check1').prop('checked', true); //是否选中 var isChecked = $('#cb').prop('checked'); //或 var isChecked = $('#cb').is(":checked"); var isChecked = $('#cb').attr('checked'); 代码 function publish() {