<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function(){ $(".js").click(function(){ var aa=""; $("input[name=checkbox1]").each(function(){ if(this.checked){ aa=this.value; $("#www").append("<img src="+aa+">"); } }) }) }) </script> <body> <table width="485" height="27" border="0" cellpadding="0" cellspacing="0"> <tr> <th width="159" scope="col"><img src="1.jpg" width="100" height="69" /></th> <th width="159" scope="col"><img src="2.jpg" width="100" height="69" /></th> <th width="159" scope="col"><img src="3.jpg" width="100" height="69" /></th> <th width="159" scope="col"><img src="4.jpg" width="100" height="69" /></th> </tr> <tr class="js"> <th scope="col"><input type="checkbox" name="checkbox1" value="1.jpg" ></th> <th scope="col"><input type="checkbox" name="checkbox1" value="2.jpg" ></th> <th scope="col"><input type="checkbox" name="checkbox1" value="3.jpg" ></th> <th scope="col"><input type="checkbox" name="checkbox1" value="4.jpg" ></th> </tr> <tr> <th width="159" scope="col"><img src="1.jpg" width="100" height="69" /></th> <th width="159" scope="col"><img src="2.jpg" width="100" height="69" /></th> <th width="159" scope="col"><img src="3.jpg" width="100" height="69" /></th> <th width="159" scope="col"><img src="4.jpg" width="100" height="69" /></th> </tr> <tr class="js"> <th scope="col"><input type="checkbox" name="checkbox1" value="1.jpg" ></th> <th scope="col"><input type="checkbox" name="checkbox1" value="2.jpg" ></th> <th scope="col"><input type="checkbox" name="checkbox1" value="3.jpg" ></th> <th scope="col"><input type="checkbox" name="checkbox1" value="4.jpg" ></th> </tr> <div id="www"></div> </table> </body>
现在的问题是我选择了一下复选框,出现一个选择的图片,然后再选择一个,会出现在上次选择的图片和这次选择的图片,变成三张图片,实际应该是两张,尝试使用$("#www").remove();无效,该咋解决啊
每点一次,遍历一次所有复选框,有选中的就append对应jpg,第一次点击append了一张,第二次点击,有两个选中,在第一次append的基础上又append了两张。
运行结果:3张,没错……
解决方法:.click里面每次.each之前,清空$("#www")的子元素——var aa="";$('#www').empty();——然后再.each
=================================================版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。