jquery - 检查不包含在 div html

Question

我有一个 div<div id="maindiv"></div>和一些复选框，用于在该 maindiv 中添加一些 html 元素。

当我选中该复选框时，我需要<div id="subdiv"></div>在检查它不包含该元素后追加。细分 id 将根据选中的复选框而变化。

当我取消选中该复选框时，我需要删除<div id="subdiv"></div>if 存在。

我如何使用 jquery 来做到这一点？

Answer 1

试试这个：

    $(function() {
        var chk = "<input id=\"sex\" name=\"sex\" type=\"checkbox\">";
        var sub = "<div id=\"subdiv\">hello</div>";
        $("#container").prepend(chk);

        $("#sex").click(function(event) {
            if ($("#maindiv").data('sex')) {
                $("#maindiv").data('sex', false);

                $("#subdiv").remove();
            } else {
                $("#maindiv").data('sex', true);
                $("#maindiv").append(sub);
            }
        });             
    });

HTML：

<div id="container">
    <div id="maindiv">main</div>
</div>

我用数据来做检查。

Answer 2

为什么不添加<div id="subdiv"></div>HTML 并在需要时隐藏/显示此 div？

Answer 3

function myToggle() {
  if($("#mycheck:checked").val()!=null) {
    //check is true
    $("#maindiv").append("<div id='subdiv'></div>");
  }
  else {
    //check is false
    $("#subdiv").remove();
  }
}

Answer 4

$('#my-checkbox').change(function() {
  if ($(this).is(':checked')) {
    if (!$('#subdiv').length) {
      $('#maindiv').append('<div id="subdiv">...</div>');
    }
  } else {
    $('#subdiv').remove();
  }
});