JQuery之复选框checkbox基本操作

林老师带你学编程

发布于 2018-01-03 17:05:26

1.7K0

发布于 2018-01-03 17:05:26

文章被收录于专栏：强仔仔强仔仔

利用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>

运行截图：