我有一个带有多个复选框的框。我正在选择复选框,然后选择我将生成 <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> 


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!