应用场景：
我们应该经常见到系统中出现列表，会有一个对列表数据的操作（如删除， 修改，查看等）。我们可以在每个列表项后面加一个删除按钮，把列表项的相关参数（如 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实现获取选中复选框的值，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！
新闻热点
疑难解答
