2016-05-26 205 views
0

我有一个包含多个复选框的框。我选择复选框,并选择我生成的<span>Value(x)</span>在不同的div上。现在我想取消选中该特定复选框的(x)点击复选框。点击按钮取消复选框

实施例:enter image description here

在选择和取消选择的复选框的<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> 
+0

代码在哪里? – Rayon

+0

我应该上传它js小提琴吗? – b0y

+0

任何........ – Rayon

回答

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> 
+0

这是工作正常:)但删除只有交叉,而不是胶囊形状:( 如何修复它? – b0y

+0

'$(this.parentNode).remove();' 工作:)谢谢Beeeeeeee – b0y

0

上线

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>"; 

因此,它与id作为然后可以在document.getElementById()使用的字符串调用removeReport(this, 'id_of_element')

相关问题