JQuery之复选框checkbox基本操作

缺乏、安全感 2022-09-24 05:15 157阅读 0赞

利用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="选中的值有：" οnclick="checkBoxFuc();"><p id="checkBoxId"></p>
    	<input type="button" value="未选中的值有：" οnclick="checkBoxEdFuc();"><p id="checkBoxEdId"></p>
    	<input type="button" value="全选：" οnclick="allCheckBoxEdFuc();"><p id="allCheckBoxEdId"></p>
    	<input type="button" value="全不选：" οnclick="notAllCheckBoxEdFuc();"><p id="notAllCheckBoxEdId"></p>
    	<input type="button" value="选中的个数：" οnclick="numberFuc();"><p id="numberId"></p>
    	<input type="button" value="未选中的个数：" οnclick="noNumberFuc();"><p id="noNumberId"></p>
    	<input type="button" value="总个数：" οnclick="allNumberFuc();"><p id="allNumberId"></p>
    	<input type="button" value="选中第一个和最后一个：" οnclick="firstLastFuc();"><p id="firstLastId"></p>
    	<input id="checkId" type="text"/><input type="button" value="选中需要选中的号数" οnclick="checkNumber();">
    </body>
    </html>

运行截图：

![Center][]

[Center]: /images/20220719/61eec9eecf314592a1d775d1d3a8bac0.png