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>