input复选checkbox多选删除

古城微笑少年丶 2022-05-29 06:11 249阅读 0赞

<!DOCTYPE html>
    <html>
    
    	<head>
    
    		<meta charset="UTF-8">
    		<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    		<link rel="stylesheet" href="css/bootstrap.css" />
    
    		<style type="text/css">
    			body {
    				margin: 30px;
    			}
    		</style>
    
    		<script type="text/javascript">
    			var isSelectAll = false; //是否全选
    			var count = 0; //记录添加的复选框的个数
    			$(function() {
    				$("#add").on('click', function() {//动态添加复选框
    					count++;
    					var content = "我是第" + count + "个被添加的元素";
    					var $con = $("#container");
    					var $div = $("<div  class='add-div'></div>");
    					var $child = $("<label><input style='margin-left: 5px;' type='checkbox'/>" + content + "</label>");
    					$div.append($child);
    					$con.append($div).append($("<hr width='200px' />"));
    
    				});
    
    				$("#select_all").click(function() {  //监听全选按钮
    					if(!$(this).is(':checked')) {  //反选
    						$("#container div  input[type='checkbox']").each(function() {
    							$(this).attr('checked', false);
    						});
                                                    isSelectAll=false;
    					} else {                           //全选操作
    						$("#container div  input").each(function() {
    							if(!$(this).is(':checked'))
    								$(this).attr('checked', true);
    						});
    						isSelectAll=true;
    					}
    				});
    				
    				
    				$("#container div input").click(function(){   //监听checkbox点击
    					if($(this).is(':checked')){
    						$(this).attr('checked',false);
    				    }else{
    				    	$(this).attr('checked',true);
    				    }
    					
    					   
    				});
    
    				$("#delete").on('click', function() {   //删除操作
    
    					if(!isSelectAll&&count==0) {  
    						alert("请选择要删除的项目");
    					} else {
                           
                           $("#container div  input").each(function(){
                           	if($(this).is(':checked')){
                           		var $div=$(this).parent().parent();//获取复选框的父节点div
                           		$div.remove();                      //移除div
                           		count--;	
                           	}
                           	  
                           });
    
    					}
    
    				});
    
    			});
    		</script>
    
    		<title>复选框的应用</title>
    
    	</head>
    
    	<body>
    
    		<div>
    			<input type="checkbox" id="select_all" class="btn  btn-primary" /><label>全选</label>
    			<input type="button" class="btn  btn-primary" id="delete" value="删除" />
    			<input type="button" class="btn  btn-primary" id="add" value="添加" />
    		</div>
    
    		<div id="container" style="margin-top: 10px;">
    
    		</div>
    
    	</body>
    
    </html>

![Image 1][] ![Image 1][]

[Image 1]: