<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>checkbox</title>
<link rel="stylesheet" type="text/css" href="css/easydialog.css">
<style type="text/css">
*{margin: 0;padding: 0;outline: none;}
body{color: #666;font-size: 12px;}
li{list-style: none;}
b{font-weight: normal;}
.dl{margin: 20px auto;width: 500px;position: relative; overflow: hidden;padding-left: 50px;}
.dl .dt{width: 50px;line-height: 28px; text-align: center;position: absolute;left: 0;top: 0;}
.dl .dt b{color: #f00;}
.dl .dd{position: relative; width: 500px;}
.dl .dd ul{overflow: hidden;}
.dl .dd ul li{float: left;padding: 5px 10px; border: 1px solid #eee; margin-right: 10px; margin-bottom: 10px; overflow: hidden; cursor: pointer;}
.dl .dd ul li input{margin-right: 5px; vertical-align: middle;}
.dl .dd ul li label{vertical-align: middle; cursor: pointer;}
#checkbox10{visibility: hidden;}
#dialogValue{display: block; padding: 5px 10px; border: 1px solid #eee;}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/easydialog.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#checkbox10").click(function() {
easyDialog.open({
container: 'easyDialogWrapper',
drag: false
});
});
$("#easyDialogYesBtn").click(function(){
var i = $("#easyDialogYesBtn").attr("data-value");
var label = $("#dialogValue").val();
if($("#dialogValue").val() != ""){
i++;
var li = '<li><input type="checkbox" id="checkbox' + i + '"><label for="checkbox' + i + '">'+ label +'</label></li>';
$("#checkbox10").parent('li').before(li);
}
easyDialog.close();
$("#dialogValue").val("");
});
$("#closeBtn,#easyDialogNoBtn").click(function(){
easyDialog.close();
});
});
</script>
</head>
<body>
<div>
<div>
<b>*</b>
标签：
</div>
<div>
<ul>
<li><input type="checkbox" id="checkbox1"><label for="checkbox1">复印速度快</label></li>
<li><input type="checkbox" id="checkbox2"><label for="checkbox2">复印也不错</label></li>
<li><input type="checkbox" id="checkbox3"><label for="checkbox3">耗材便宜</label></li>
<li><input type="checkbox" id="checkbox4"><label for="checkbox4">使用方便</label></li>
<li><input type="checkbox" id="checkbox5"><label for="checkbox5">扫描方便</label></li>
<li><input type="checkbox" id="checkbox6"><label for="checkbox6">效果不错</label></li>
<li><input type="checkbox" id="checkbox7"><label for="checkbox7">功能齐全</label></li>
<li><input type="checkbox" id="checkbox8"><label for="checkbox8">机器不错</label></li>
<li><input type="checkbox" id="checkbox9"><label for="checkbox9">墨盒便宜</label></li>
<li><input type="checkbox" id="checkbox10"><label for="checkbox10">自定义</label></li>
</ul>
</div>
</div>
<!--==弹出层==-->
<div id="easyDialogWrapper" >
<div>
<h4 id="easyDialogTitle">
<a href="javascript:void(0)" title="关闭窗口" id="closeBtn">×</a>
提示
</h4>
<div>
<input type="text" value="" id="dialogValue"/>
</div>
<div>
<button id="easyDialogNoBtn">取消</button>
<button id="easyDialogYesBtn" data-value="10">确定</button>
</div>
</div>
</div>
</body>
</html>
