取消选中单击按钮上的复选框

Question

我有一个包含多个复选框的框。我选择了复选框，然后选择我在另一个div上生成<span> 值（x） </span>。现在我想取消选中该特定复选框的（x）复选框。

示例：

在选中和取消选中复选框时，<span> 值（x） </span>即将来去。但反过来没有发生。

.reportbox是图块的类（复选框）。 #compareSection是保留按钮的区域。

我正在使用的代码：

<script type="text/javascript">
      $('.reportBox').click(function() {
        var selected = $('input[type=checkbox]:checked').map(function(_, el) {
            selectedCheckbox = el.id;
            var element = "<p class='selectedReport'>"+ $(el).val() + "</p>" + "<span onclick='removeReport(this, selectedCheckbox)' class='badge badge-notify close-badge'>x</span>";
            return "<span id='elementPack'>" + element + "</span>"; 
        }).get();
        $("#compareSection").html(selected);
      })

      // this code is for removing the URLs 
      function removeReport(sender, selectedCheckbox) {
        document.getElementById(selectedCheckbox).checked = false;
        var div = sender.parentNode;
        div.parentNode.removeChild(div);
      }
    </script>

Answer 1

<script>
$(function() {
    $('.reportBox').click(function() {
        var selected = $('input[type=checkbox]:checked').map(function(_, el) {
        selectedCheckbox = el.id;
        var element = '<p class="selectedReport">'+ $(el).val() + '</p>' + '<span data-target-box="'+el.id+'" class="badge badge-notify close-badge">x</span>';
        return '<span id="elementPack">' + element + '</span>'; 
    }).get();
    $("#compareSection").html(selected);
  });
  $(document).on('click', 'span[data-target-box]', function(e) {
        $('#'+$(this).data('target-box')).prop('checked', false);
        $(this).remove();
  });
});
</script>

Answer 2

在线

var element = "<p class='selectedReport'>"+ $(el).val() + "</p>" + "<span onclick='removeReport(this, selectedCheckbox)' class='badge badge-notify close-badge'>x</span>";

您正在使用selectedCheckbox作为字符串，这意味着当您单击它时它将查找该变量，但该变量从未在第一个范围之外定义。您可能希望将其更改为以下内容：

var element = "<p class='selectedReport'>"+ $(el).val() + "</p>" + "<span onclick='removeReport(this, \'"+selectedCheckbox+"\')' class='badge badge-notify close-badge'>x</span>";

因此它会将removeReport(this, 'id_of_element')作为字符串调用，然后可以在document.getElementById()中使用。