JQuery之复选框checkbox基本操作

利用JQuery实现复选框的基本操作,例如全选、全部选、获取选中值、获取未选中值、获取选中长度等操作。

下面直接看例子,例子中有详细的介绍了JQuery是如何实现这些功能的。

在使用JQuery之前要先导入JQuery的相关文件,我这里引入的是jquery-1.8.0.min.js

<html>
<head>
	<meta charset="UTF-8">
<title>js中字符串处理</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
	$(function() {

	});

	function checkBoxFuc(){
		var str="";
		$('input:checkbox').each(function() {
			if ("checked"==$(this).attr('checked')) {
				str=str+$(this).val()+",";
			}
		});
		str="<h1>"+str+"</h1>";
		$("#checkBoxId").html(str);
	};

	function checkBoxEdFuc(){
		var str="";
		$('input:checkbox').each( function(){
			var self=$(this);
			if(!self.prop('checked')){
				str=str+self.val()+",";
			}
		});
		str="<h1>"+str+"</h1>";
		$("#checkBoxEdId").html(str);
	};

	function allCheckBoxEdFuc(){
		$('input:checkbox').each(function(){
			var self=$(this);
			if(!self.prop('checked')){
				self.prop('checked',true);
			}
		});
	};

	function notAllCheckBoxEdFuc(){
		$('input:checkbox').each(function(){
			var self=$(this);
			if(self.prop('checked')){
				self.prop('checked',false);
			}
		});
	};

	function numberFuc(){
		var length="<h1>选中的个数为:"+$('input:checkbox:checked').length+"</h1>";
		$("#numberId").html(length);
	};

	function noNumberFuc(){
		var allLength=+$('input:checkbox').length;
		var checkedLength=$('input:checkbox:checked').length;
		var length=allLength-checkedLength;
		$("#noNumberId").html("<h1>未选中个数为:"+length+"</h1>");
	}
	function allNumberFuc(){
		var length="<h1>总个数为:"+$('input:checkbox').length+"</h1>";
		$("#allNumberId").html(length);
	};

	function firstLastFuc(){
		$('input:checkbox:first').attr("checked",'true');
		$('input:checkbox:last').attr("checked",'true');
	};

	function checkNumber(){
		var number=$("#checkId").val();
		//$('input:checkbox').eq(number-1).attr("checked",'true');
		$('input:checkbox').eq(number-1).prop("checked",true);
	}
</script>

<body>
	<input type="checkbox" value="1">1
	<input type="checkbox" value="2">2
	<input type="checkbox" value="3">3
	<input type="checkbox" value="4">4
	<input type="checkbox" value="5">5
	<input type="checkbox" value="6">6
	<input type="checkbox" value="7">7
	<input type="checkbox" value="8">8</br>
	<input type="button" value="选中的值有:" onclick="checkBoxFuc();"><p id="checkBoxId"></p>
	<input type="button" value="未选中的值有:" onclick="checkBoxEdFuc();"><p id="checkBoxEdId"></p>
	<input type="button" value="全选:" onclick="allCheckBoxEdFuc();"><p id="allCheckBoxEdId"></p>
	<input type="button" value="全不选:" onclick="notAllCheckBoxEdFuc();"><p id="notAllCheckBoxEdId"></p>
	<input type="button" value="选中的个数:" onclick="numberFuc();"><p id="numberId"></p>
	<input type="button" value="未选中的个数:" onclick="noNumberFuc();"><p id="noNumberId"></p>
	<input type="button" value="总个数:" onclick="allNumberFuc();"><p id="allNumberId"></p>
	<input type="button" value="选中第一个和最后一个:" onclick="firstLastFuc();"><p id="firstLastId"></p>
	<input id="checkId" type="text"/><input type="button" value="选中需要选中的号数" onclick="checkNumber();">
</body>
</html>

运行截图:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一心无二用,本人只专注于基础图像算法的实现与优化。

SSE图像算法优化系列二:高斯模糊算法的全面优化过程分享(一)。

     这里的高斯模糊采用的是论文《Recursive implementation of the Gaussian filter》里描述的递归算法。 ? ...

3546
来自专栏数据小魔方

sparklines迷你图系列6——Comparison(Columns)

今天分享sparklines迷你图中的Comparision图表类型中的Columns图表。 该图表说到底其实就是我们日常工作中最常用到的柱形图。 该图表的函数...

2414
来自专栏生信小驿站

R 热图绘制heatmap②

694
来自专栏GIS讲堂

说说地图中的聚类

虽然Openlayers4会有自带的聚类效果,但是有些时候是不能满足我们的业务场景的,本文结合一些业务场景,讲讲地图中的聚类展示。

753
来自专栏web前端-

css3动画效果

transform:2D变形: 通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。转换方法:translate()/rotate()/sca...

984
来自专栏AILearning

Apache Spark 2.2.0 中文文档 - GraphX Programming Guide | ApacheCN

GraphX Programming Guide 概述 入门 属性 Graph 示例属性 Graph Graph 运算符 运算符的汇总表 P...

3748
来自专栏潇涧技术专栏

When Math meets Android Animation (1)

当数学遇上动画:讲述ValueAnimator、TypeEvaluator和TimeInterpolator之间的恩恩怨怨(1)

822
来自专栏数值分析与有限元编程

可视化 | Tecplot绘制云图

Tecplot是功能强大的数据可视化工具,可以将计算中得到的大量数据形成直观图形。Tecplot的功能包括绘制XY曲线、轮廓图、云线、等值线、向量图、离散点等。...

9104
来自专栏web前端教室

有空看看jQuery源码吧,看不懂也会有收获

jQuery是一个对新人很亲切的JS库,它的源码风格都比较接近自然语言,可以一边对照手册,一边查看jQuery源码。第一次看必然很吃力,不过没关系,这就是学习的...

1706
来自专栏Windows Community

Extensions in UWP Community Toolkit - Visual Extensions

概述 UWP Community Toolkit Extensions 中有一个为可视元素提供的扩展 - VisualExtensions,本篇我们结合代码详细...

2605

扫码关注云+社区