我有一个带有多个复选框的框。我正在选择复选框,然后选择我将生成 <span>
值 (x) </span>
在不同的 div 上。现在我想在单击该特定复选框的 (x) 时取消选中该复选框。
选择和取消选择复选框时 <span>
值 (x) </span>
来来去去。但相反的情况并没有发生。
.reportbox 是图 block (复选框)的类。 #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>
请您参考如下方法:
<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>