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 条评论
登录 后参与评论

相关文章

来自专栏闵开慧

hive操作总结

1 将排序结果插入到新文件中 hive> insert overwrite table re_table1 select * from table1 clust...

3738
来自专栏林德熙的博客

代码段

但很多时候我们需要使用通知OnPropertyChanged,这时在 VisualStudio 就没有写好的,如果是写属性,这样每个都来增加一句OnProper...

351
来自专栏Python爬虫实战

Python指南:文件处理

哪种文件格式最适合用于存储整个数据集——二进制、文本还是XML?这严重依赖于具体的上下文。

851
来自专栏V站

Python CIDR地址块算法

最近写扫描器有个模块需要把CIDR地址块(类似与192.168.1.1/24)之类的地址解析成IP地址。

1387
来自专栏Android自学

【转】jQuery验证控件jquery.validate.js使用说明+中文API

1434
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第三天 JavaScript学习【悟空教程】

用户在提交表单时,需要对用户的填写的数据进行校验。本案例只对用户名、密码、确认密码和邮箱进行校验。

611
来自专栏Aloys的开发之路

linux中无 conio.h的解决办法

      conio.h不是C标准库中的头文件,在ISO和POSIX标准中均没有定义。conio是Console Input/Output(控制台输入输出)...

1857
来自专栏python学习路

五、常用模块

模块介绍 time &datetime模块 random os sys shutil json & picle shelve xml处理 yaml处理 conf...

2978
来自专栏深度学习之tensorflow实战篇

Python读取json文件,并转化为字典进行提取字段(出现索引must be int,not str)解决方案

Python读取json文件,并转化为字典进行提取字段(出现索引must be int,not str)解决方案 def craw_file(): di...

2664
来自专栏Golang语言社区

Golang语言社区--列出目录和遍历目录的方法

package main import ( "fmt" "io/ioutil" "os" "path/filepath" "strings" ) //...

34710

扫码关注云+社区