取消选中具有匹配ID的复选框

Question

我遇到了一个问题，希望有人可以提供帮助，我尝试了一些不同的想法，但仍未解决。我已经使脚本使每个复选框的单击都出现了一个复选框项目的列表，但是我要做的是单击打开的列表项上的“ X”以取消选中匹配的输入。我在这里有一个工作正常的CodePen，向您展示我的意思：https://codepen.io/nickelse/pen/dLoOVE感谢您的帮助，如果我需要进一步解释，请告诉我:)我尝试了一些不同的想法，但是无法正确地将其匹配到相应的输入的逻辑。//demo example$(function() {    var $allProducts = $(".js-refinement-link.input-checkbox");    var $selectedProductsListing = $(".selectedProducts");    $allProducts.on("click", function(e) {        $selectedProductsListing.html(            $allProducts                .filter(":checked")                .map(function(index, checkbox) {                    return (                        '<li class="checked-items ' +                        checkbox.id +                        '" id="' +                        checkbox.id +                        '"><span>' +                        checkbox.id +                        "</span></li>"                    );                })                .get()                .join("")         );    });});.ul-reset {    list-style: none;    margin: 0;    padding: 0;}.selectedProducts {    display: flex;    margin-left: -20px;    margin-top: 40px;}.checked-items {     padding-left: 20px;}.checked-items span {    align-items: center;    background: white;    border: 3px solid tomato;    border-radius: 6px;    color: #333;    display: flex;    height: 36px;    line-height: 1;    padding-left: 10px;    padding-right: 10px;}.checked-items span:after {   color: red;    width: 12px;    content: 'X';    display: flex;    align-items: center;    justify-content: center;    margin-left: 10px;}

Answer 1

您不能直接将事件绑定到伪元素，因此到达此处的路线将是具有单击事件以侦听父元素（如@Roy的答案所示），但这将在整个范围内具有事件侦听器。

您的其他解决方案是在.checked-items中包含一个子元素，该子元素保存您的'X'，而不是使用伪元素（：after）。这样，您将能够直接绑定到元素。