效果如圖,我的數據是數組中取到的,然后復制出來一份,顯示選擇是是什么,並增加了刪除操作,並且把上邊選中的狀態也取消;
強調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>