当我选中红色按钮时,文本框后面就会出现一个红色图标;当我再选中一个蓝色按钮时,文本框后面就会既有红色图标又有蓝色图标。当我把红色按钮取消时,红色图标就会消失。当取消时怎么让图片消失?
示例代码如下:
<script>
  function test(){
  if($("#aaa").attr("checked")==true){
   $("#ccc").append("<img src='red.png'/>");
}
else{
   $("#ccc").remove("<img src='red.png'/>");
}
}
</script>
<body>
  <div>
     姓名:<input id="ccc" type="text" value=""/> 
     多选框:
      <input type="checkbox" value="red" id="aaa">红色
      <input type="checkbox" value="blue" id="bbb">蓝色      
  </div>
</body>

解决方案 »

  1.   

    $("#ccc").append($("<img src='red.png'/>"));
    $("#ccc").remove($("<img src='red.png'/>"));
      

  2.   

    function test(){
       var $img = $("<img src='red.png'/>");
       if($("#aaa").attr("checked")==true){
      $("#ccc").append($img);
    }
    else{
      $("#ccc").remove($img);
    }
    }
    这样试 你两次append 和remove 的 不是一个对象
    如果这样还不行 那你就给你生成的那个img 加一个ID remove时先找到这个ID的图 再remove
      

  3.   

    楼主像这样来做<body>
        <div>
            姓名:<input id="ccc" type="text" value="" />
            <img src='red.png' id="red" style="display: none;" />
            多选框:
            <input type="checkbox" value="red" id="aaa">红色
            <input type="checkbox" value="blue" id="bbb">蓝色
        </div>
    </body>
    </html>
    <script>
        $(function () {
            //点击红色复选框的时候
            $("#aaa").bind("click", function () {
                 //如果当前这个复选框被选上
                if (this.checked == true) {
                     //显示图片
                    $("#red").show();
                }
                else {
                    //隐藏图片
                    $("#red").hide();
                }
            })
        })
    </script>
      

  4.   


    append方法是在内部追加加入img,应该是after("<img src='red.png'/>"),在元素后加入删除的是$("#ccc").next().remove();
      

  5.   

    隐藏用 $("#ccc").hide();