效果如图,我的数据是数组中取到的,然后复制出来一份,显示选择是是什么,并增加了删除操作,并且把上边选中的状态也取消;
强调jq的另一种绑定事件方法live('' , '');用于动态加载中的绑定事件;
下载记得更改jq的引用位置
<!DOCTYPE> <html> <head> <title> New Document </title> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <link rel="stylesheet" type="text/css" href=""> <script type="text/javascript" src="jquery-1.8.0.min.js"></script> </head> <body> <div> <ul class="liebiao"></ul> </div> <div class="fuzhi"> <p>您选择的是:</p> <div class="fzcont"></div> </div> </body> <script type="text/javascript"> <!-- var zu = ["姓名","电话","公司","住址"]; function test1(){ var liebiao = $(".liebiao"); for (var i=0;i<zu.length ;i++ ) { var new_input = $("<input type='checkbox' name='checkusers' value="+zu[i]+" />"); var new_span = $("<span>"+zu[i]+"</span>"); var new_li = $("<li></li>"); new_li.appendTo(liebiao); new_input.appendTo(new_li); new_span.appendTo(new_li); } }test1(); $("input[name='checkusers']:checkbox").live("click",function() { $(".fzcont").html(''); $("input[name='checkusers']:checkbox").each(function(){ if ($(this).attr("checked")) { var inp_val = $(this).val(); var removebtn = "<a href='javascrip:;' name="+inp_val+">删除</a>"; var new_div2 =$("<div>"+inp_val+""+removebtn+"</div>"); new_div2.appendTo($(".fzcont")); } }) }); var re_btn = $(".fzcont a"); re_btn.live("click",function(){ var valtwo =$(this).attr("name"); $("input[name='checkusers']:checkbox").each(function(){ var thisval = $(this).val(); if (valtwo == thisval) { $(this).attr("checked",false);//移除选中状态 } }) $(this).parent().remove(); }) //--> </script> </html>