jQuery插件_全选反选

灰太狼 2022-05-08 09:52 274阅读 0赞

效果

![70][]

代码：

1、jQuery插件的代码（allCheck.js）

//1、定义全选的插件
    jQuery.fn.extend({
    	bindCheck:function($subCheckBox,$btnUncheck){
    		let $allCheckBox = this;
    		//1、给全选复选框绑定click事件
    		//this:是全选复选框（jQuery对象）
    		this.click(function(){
    			let isChecked = this.checked;
    			$subCheckBox.each(function(){
    				this.checked = isChecked;
    			});
    		});
    		//2、给反选
    		if(arguments.length==2){
    			$btnUncheck.click(function(){
    				$subCheckBox.each(function(){
    					this.checked = !this.checked;
    				});
    				reversCheck();
    			});
    		}
    		//3、给每个选择项的复选框绑定事件
    		$subCheckBox.click(function(){
    			reversCheck();
    		});
    		function reversCheck(){
    			//1、判断是否全部的复选框被选中
    			let isAllChecked = true;
    			$subCheckBox.each(function(){
    				if(!this.checked){
    					isAllChecked = false;
    				}
    			});
    			//2、处理全选复选框
    			$allCheckBox.attr("checked",isAllChecked);
    		}
    	}
    });

2、使用插件的代码（html文件）：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		选择你喜欢的水果:<br/>
    		<input id="chkAll" type="checkbox" />全选
    		<input id="btnUnCheck" type="button"  value="反选" /> <br/>
    		<div id="FruitBox">
    			<input type="checkbox" />苹果<br/>
    			<input type="checkbox" />香蕉<br/>
    			<input type="checkbox" />猕猴桃<br/>
    			<input type="checkbox" />梨<br/>
    			<input type="checkbox" />樱桃<br/>
    		</div>
    	</body>
    </html>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/allCheck.js"></script>
    <script type="text/javascript">
    
    $(function(){
    	$("#chkAll").bindCheck($("#FruitBox :checkbox"),$("#btnUnCheck"));
    });
    
    </script>

[70]: /images/20220508/e3ad05f2cf2646ef8b0f834f7f5af2b1.png