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，回调函数描述：
通过函数来设置所有页⾯上的复选框反选。
jquery是什么选择器$("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实现获取选中复选框的值，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。