<!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>