input复选checkbox多选删除

<!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>
input复选checkbox多选删除

猜你喜欢
