jQuery实现获取选中复选框的值

关注

最新推荐文章于 2025-03-16 10:45:00 发布 · 9.8k 阅读

转载 ·

本内容遵循 CC 4.0 BY-SA 版权协议

原文链接：https://blog.csdn.net/sinat_20418545/article/details/73478617

NE555 时基电路温度控制器：3种经典电路方案对比与选型指南本文深入解析NE555时基电路在温度控制器中的3种经典应用方案，包括简易型开关控制、自动型频率调制及NE555+LM567混合架构。通过对比电路设计、元件选型与性能参数，提供工程选型指南，帮助开发者根据精度需求和成本预算选择最优解，特别适合电子爱好者和小型项目开发。阅读详情

应用场景：

我们应该经常见到系统中出现列表，会有一个对列表数据的操作（如删除，
修改，查看等）。我们可以在每个列表项后面加一个删除按钮，把列表项的
相关参数（如 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))

[注意]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 id="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>

转自：https://blog.csdn.net/sinat_20418545/article/details/73478617

收录于