Question

我创建了一个复选框来添加和删除div。

现在，我该怎么做？：默认选中第一个复选框（因此默认情况下会附加第一个div）。然后，在选中第二个复选框时，自动取消选中第一个复选框。这应该使第一个div被删除并附加第二个div。（反之亦然）

这是我的代码，仅供参考

            $(function(){
            let NewContent='<div class="added"> HELLO </div>'
            let added = false;
            let $content;
            $(".first").on('click', function(){
            if (!added) $content =  $(NewContent).appendTo('.toadd');
            else $content.remove();
            added = !added;
          });
        });


            $(function(){
            let NewContent='<div class="added"> BYE </div>'
            let added = false;
            let $content;
            $(".second").on('click', function(){
            if (!added) $content =  $(NewContent).appendTo('.toadd');
            else $content.remove();
            added = !added;
          });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toadd">
<label>One</label><input type="checkbox" class="first" />
<label>Two</label><input type="checkbox" class="second" />
</div>

Answer 1

由于您希望检查是独占的...我建议您使用radio buttons的正常行为。

然后你需要有一个变量，每次点击都会从0变为1，从数组中的两个内容值中选择。

$(function(){

  let content=[
    '<div class="added"> HELLO </div>',
    '<div class="added"> BYE </div>'
  ];
  let toggled=0;
    
$("[name='something']").on('change', function(){
    $(".added").remove();
    toggled=(toggled+1)%2;
    $(".toadd").append(content[toggled])
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toadd">
  <label>One</label><input type="radio" class="first" name="something" checked />
  <label>Two</label><input type="radio" class="second" name="something" />
  <div class="added"> HELLO </div>
</div>

如何使用复选框追加和删除不同的div

1 个答案: