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

相关文章

来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3725
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

3017
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4435
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

3035
来自专栏芋道源码1024

熔断器 Hystrix 源码解析 —— 断路器 HystrixCircuitBreaker

本文主要基于 Hystrix 1.5.X 版本 1. 概述 2. HystrixCircuitBreaker 3. HystrixCircuitBreaker....

5857
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

39510
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

7436
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

8908
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2797
来自专栏落花落雨不落叶

canvas画简单电路图

89211

扫码关注云+社区